如何使用canvas

一，背景介绍

Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。

Canvas 对象表示一个 HTML 画布元素--&ltcanvas&gt。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

---

二、知识剖析

定义和用法

首先，在HTML元素中定义一个canvas标签

<canvas id="tutorial" width="150" height="150"></canvas>

获取canvas对象

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

绘制基本图形

canvas只支持一种原生的矩形绘制，所有其他图形都至少需要生成一种路径。

绘制一个填充的矩形，填充的默认颜色为黑色

fillRect(x, y, width, height)

绘制一个矩形的边框

strockRect(x, y, width, height)

清除指定矩形区域，然后这块区域会变得完全透明

clearRect(x, y, widh, height)

---

三、常见问题

如何绘制更多图形？

---

四、解决方案

图形的基本元素是路径。

路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

步骤如下：

1.创建路径起始点

2.调用绘制方法去绘制出路径

3.把路径封闭

4.一旦路径生成，通过描边或填充路径区域来渲染图形。

---

五、编码实战

绘制一个三角形

    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(200, 50);
    ctx.lineTo(200, 200);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();

效果如下：

绘制圆弧

    var degrees = 90;
    radians=(Math.PI/180)*degrees   //角度转换成弧度
    console.log('radians', radians);
    ctx.beginPath();
    ctx.arc(50, 50, 40, 0, radians,false);
    ctx.stroke();

效果如下：

绘制二次贝塞尔曲线

    ctx.beginPath();
    ctx.moveTo(50, 200); //起始点
    var cp1x = 70,
      cp1y = 50; //控制点
    var x = 200,
      y = 200; // 结束点
    ctx.quadraticCurveTo(cp1x, cp1y, x, y);
    ctx.stroke();
    //下面代码是显示各个点
    ctx.beginPath();
    ctx.rect(45, 195, 10, 10);
    ctx.rect(cp1x - 5, cp1y - 5, 10, 10);
    ctx.rect(x - 5, y - 5, 10, 10);
    ctx.fill();

效果如下

---

六、拓展思考

save()和restore()的用法？

---

七、参考文献

MDN Canvas教程

---

八、更多讨论

Q1：一次贝塞尔曲线是什么？

A1：其实就是直线

Q2：save和restore的用法？

A2：save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。

Q3：定时执行重绘的方法有哪几种？

A3：

1. setInterval()

2. setTimeout()

3. requestAnimationFrame(