canvas mdn_Canvas绘图API（来自MDN）

1.绘图

绘制一个填充的矩形

绘制一个矩形的边框

清除指定矩形区域，让清除部分完全透明。

beginPath()

新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()

闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()

通过线条来绘制图形轮廓。

fill()

通过填充路径的内容区域生成实心的图形。

moveTo(x,y)

将笔触移动到指定的坐标x以及y上。

绘制一条从当前位置到指定x以及y位置的直线。

画一个以(x,y)为圆心的以radius为半径的圆弧(圆)，从startAngle开始到endAngle结束，按照anticlockwise给定的方向(默认为顺时针)来生成。

根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

quadraticCurveTo(cp1x, cp1y, x, y)

绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

rect(x,y,width,height)

绘制一个左上角坐标为(x,y)，宽高为width以及height的矩形。

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

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

示例：

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);

2.图形样式

设置图形的填充颜色。

设置图形轮廓的颜色。

这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 (完全透明)到 1.0(完全不透明)，默认是 1.0。

线型

设置线条宽度。

设置线条末端样式。

butt，round 和 square。默认是 butt。

设定线条与线条间接合处的样式。

lineJoin 的属性值决定了图形中两线段连接处所显示的样子。它可以是