HTML5之4__Canvas API: 绘制曲线、变换-H5教程-PHP中文网

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

黄舟

发布： 2017-02-18 14:20:00

原创

1540 人浏览过

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>

登录后复制

运行效果