HTML5 Canvas API 学习笔记（一）

HTML Canvas API里的几个基本方法：

beginPath()：清空子路径，让上下文再次没有子路径。
closePath()：关闭最后一条子路径，并创建一个新的子路径起点，该起点与上一条子路径的起点相同，最后添加新的子路径到路径中。

beginPath()和closePath()是一对控制子路径的方法。一条完整的子路径应该分别以这两个方法作为起点和中点，如果不使用这两个方法，会产生意想不到的结果。

moveTo(x, y)：创建一条新的子路径并以点(x, y)为子路径唯一的起点。
lineTo(x, y)：在子路径最后一个点和点(x, y)之间画一条直线，并将点(x, y)添加到子路径中。

用这两个方法可以画一条直线，但为什么画完后什么也没有呢？

stroke()：使用lineWidth，lineCap，lineJoin和miterLimit几个属性，然后使用strokeStyle属性来填充连接的区域。

这个方法就能解释上一个问题。moveTo和lineTo方法只是定义了一条线，但具体线宽、线的类型等属性还没定义，所以在定义好线的属性后，就可以调用stroke方法把线画出来了。与stroke相类似的还有一个fill方法。

fill()：通过fillStyle属性和非零缠绕数规则来填充当前路径的整个子路径，不闭合的子路径会被隐式闭合（但不会影响实际的子路径）。

这个方法在非直线的子路径中就能看出与stroke方法的区别。stroke方法只是将整个路径画出，而fill方法会连接子路径起点和当前最后一个点（不闭合的时候），并将闭合部分填充。

quadraticCurveTo(cpx, cpy, x, y)：quadratic是二次的意思，从方法名中可以看出这个方法是通过二次画一条曲线，其中点(cpx, cpy)为辅助点，(x, y)是终点，但画出的线是不经过点(cpx, cpy)的。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：bezier是贝塞尔的意思，从方法名中可以看出这个方法是绘制一条贝塞尔曲线。其中点(cp1x, cp1y)和(cp2x, cp2y)是两个辅助点，点(x, y)是终点，与quadraticCurveTo方法类似，比quadraticCurveTo方法多出一个辅助点，这样画出的曲线会更精确。

arc(x, y, radius, startAngle, endAngle, anticlockwise)：这个方法是绘制圆弧的方法。其中以点(x, y)为圆心，radius为半径，startAngle为圆弧起点，endAngle为圆弧终点，anticlockwise是逆时针的意思，确定的是圆弧的方向。其中startAngle为0的点是在圆心的正右方，0.5PI的点在圆心正上方，PI的点在圆心的正左方，2PI的点与0的点是重合的。默认情况下为逆时针方向，即anticlockwise为true，当设置anticlockwise为false时，圆弧方向为顺时针。

这几个方法就是我目前掌握的几个基本方法，更多方法请期待Canvas学习笔记（二）。

评论

1 楼 kital133 2011-08-18