首页 > web前端 > H5教程 > 正文

HTML5之4__Canvas API: 绘制曲线、变换

黄舟
发布: 2017-02-18 14:20:00
原创
1563 人浏览过

HTML5 开发 起点之一就是 Canvas, 通过它可以动态生成和展示图形、图表、图像以及动画.

 在Canvas 出现之前,开发人员若要在浏览器中使用绘图API, 只能使用 Adobe 的Flash和 SVG(可伸缩矢量图形) 插件, 或者只有IE才支持的VML(矢量标记语言), 以及一些JS技巧。

                                                 Canvas 和 SVG 对比                                            

Canvas 本质上是一个位图画布, 其上绘制的图形是不可缩放的, 不能像 SVG 图像那样可以缩放, 此外用Canvas 绘制出来的对象不属于页面

DOM 结构或者任何命名空间, 这被认为是一个缺陷, SVG 图像却可以在不同的分辨率下流畅地缩放, 并且支持单击检测.  尽管Canvas 有明显的不足,但 Canvas API 有两个优势:

   1.  不需要将所绘制图像中的每个图元当做对象存储, 执行性能非常好。

   2.  在其他编程语言现有的优秀二维绘图API 的基础上实现 Canvas API 相对来说比较简单.

一. 先介绍 canvas 绘制曲线

看代码


<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8" />
    <title>绘制曲线</title>
    <script language="javascript">
        function drawTrails() {
            var canvas = document.getElementById(&#39;trails&#39;);
            var context = canvas.getContext(&#39;2d&#39;);
            context.save();
            context.translate(-10, 350);
            context.beginPath();
            //第一条曲线向右上方弯曲
            context.moveTo(0,0);
            context.quadraticCurveTo(170, -50, 260, -190);

            // 第二条曲线向右下方弯曲
            context.quadraticCurveTo(310, -250, 410, -250);

            //使用棕色的粗线条来绘制路径
            context.strokeStyle = &#39;#663300&#39;;
            context.lineWidth = 20;
            context.stroke();
            //恢复之前的canvas 状态
            context.restore();
        }
        window.addEventListener("load", drawTrails, true);
    </script>
</head>
<body>
    <canvas height="400" width="400" id="trails" style="border: 1px solid;"/>
</body>
</html>
登录后复制


在Chrome 浏览器运行效果



二. 变换

canvas 绘制图像的一种方式是 使用变换 transformation. 实际上 变换是实现复杂canvas 操作的最好方式.

可以这样理解 变换: 把它当成是介于开发人员发出的指令和 canvas 显示结果之间的一个修改正层,

以下一个例子展示了如何使用 最简单变换方法---------translate()

看代码


<!DOCTYPE html>
<html>
  <meta charset="utf-8" />
  <title>变换对角线</title>

  <canvas id="diagonal" style="border: 1px solid;"  width="200" height="200"> </canvas>
  <script>
        function drawDiagonal() {
            var canvas = document.getElementById(&#39;diagonal&#39;);
            var context = canvas.getContext(&#39;2d&#39;);

            // 保存当前绘图状态
            context.save();

            //向右下方移动绘图上下文
            context.translate(70, 140);

            //以原点为起点,绘制与前面相同的线段
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(70, -70);
            context.stroke();

            // 恢复原有的绘图状态
            context.restore();
        }

        window.addEventListener("load", drawDiagonal, true);
  </script>
</html>
登录后复制

运行效果 


 以上就是HTML5之4__Canvas API: 绘制曲线、变换的内容,更多相关内容请关注PHP中文网(www.php.cn)!


相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板