Canvas基础

检查支持性

if (canvas.getContext) {
    var ctx = canvas.getContext('2d')
} else {
    // canvas-unsupported code here
}

绘制矩形

// 绘制一个填充的矩形
ctx.fillRect(x, y, width, height)
// 绘制一个矩形边框
ctx.strokeRect(x, y, width, height)
// 清除指定矩形区域
ctx.clearRect(x, y, width, height)
// 执行该方法时，moveTo方法自动设置左边参数(0, 0)。也就是说，当前笔触自动重置回默认坐标
ctx.rect(x, y, width, height)

绘制路径

// 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径
ctx.beginPath()
// 闭合路径之后，图形绘制命令又会重新指向到上下文
ctx.cloasePath()
// 通过线条绘制图形轮廓
ctx.stroke()
// 通过填充路径的内容区域来生成实心的图形
ctx.fill()

生成路径的第一步叫做beginPath(),本质上路由是由很多子路径组成的，这些子路径在一个列表中，所有的子路径（线、弧形等）构成图形。而每次调用这个方法之后，列表都会被清空，然后我们可以重新绘制图形。

第二步就是调用函数绘制指定路径

第三步是闭合路径closePath(),不是必须的。这个方法会绘制一条从当前点到起始点的直线来闭合图形。如果图形已经闭合，即当前点就是起始点，则该函数什么也不做。

注意：当调用fill()函数时，所有没有闭合的形状都会闭合，所以不用调用closePath()函数。但是调用stroke()不会自动闭合。

绘制三角形

ctx.beginPath()
ctx.moveTo(75, 50)
ctx.lineTo(100, 75)
ctx.lineTo(100, 25)
ctx.fill()

移动笔触

ctx.moveTo(x, y)

绘制直线

ctx.lineTo(x, y)

绘制圆弧

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)

• x,y为圆心位置
• radius为半径
• startAngle和endAngle为用弧度定义了开始和结束的弧度。这些都是以X轴为基准
• anticlockwise是布尔值，为true时为逆时针，否则顺时针方向，默认顺时针方向

二次贝塞尔曲线及三次贝塞尔曲线

// 绘制二次贝塞尔曲线，cp1x、cp1y为一个控制点，x、y为结束点
quadraticCurveTo(cp1x, cp1y, x, y)
// 绘制二次贝塞尔曲线，cp1x、cp1y为第一个控制点，cp2x、cp2y为第二个控制点，x、y为结束点
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Path2D对象

为了简化代码和提高性能，Path2D对象已可以在较新版本的浏览器中使用，用来缓存或记录绘画命令，这样你将能快速地回顾路径。

Path2D()

Path2D()会返回一个新初始化的Path2D对象，可能将某一个路径作为变量，创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量。

new Path2D() // 创建空的Path2D对象
new Path2D(path) // 克隆path对象
new Path2D("M10 10 h 80 v 80 h -80 Z") // 从svg创建path对象

所有的路径方法比如moveTo, rect, arc或quadraticCurveTo等，如我们前面见过的，都可以在Path2D中使用。

Path2D.addPath(path [, transform])

添加了一条路径到当前路径（可能添加了一个变换矩阵）。

在这个例子中，我们创造了一个矩形和一个圆。它们都被存为Path2D对象，后面再派上用场。随着新的Path2D API产生，几种方法也相应地被更新来使用Path2D对象而不是当前路径。在这里，带路径参数的stroke和fill可以把对象画在画布上

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    
    var rectangle = new Path2D();
    rectangle.rect(10, 10, 50, 50);
    
    var circle = new Path2D();
    circle.moveTo(125, 35);
    circle.arc(100, 35, 25, 0, 2 * Math.PI);
    
    ctx.stroke(rectangle);
    ctx.fill(circle);
  }
}