当前位置: 代码迷 >> HTML/CSS >> HTML5 Canvas API 学习札记(一)
  详细解决方案

HTML5 Canvas API 学习札记(一)

热度:874   发布时间:2012-09-08 10:48:07.0
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