学习HTML5 canvas遇到的问题 - 码代码的梵高_H5之家

　　学习HTML5 canvas遇到的问题 1. 非零环绕原则(nonzZero rule)

非零环绕原则); ); ); ); ); ); ); ); ); ); ); ); 26 ctx.fill();

View Code

非零环绕原则); ); ); ); ); ); ); ); ); ); ); ); 26 ctx.fill();

View Code

大矩形的绘制方向与小矩形的绘制方向相反时效果图

2. closePath() 与 lineTo()的区别

Document); ); ; ); ); ); ); ); ); ); 30 ctx.closePath(); 31 ctx.stroke();

View Code

3. arc绘图的注意事项

使用 arc 绘图的时候, 如果没有设置 moveTo ,那么会从开始绘弧的地方作为起始点，连线到圆弧的起点.

如果使用 stroke 方法, 那么会连线到圆弧的起始位置. 如果是 fill 方法, 会自动闭合路径填充.

Document); ); ); ); ,Math.PI); 22 ctx.stroke(); ); ); ); 27 ctx.stroke(); 28 29 ctx.beginPath(); ); ); ); 33 ctx.fill(); 34 35 ctx.beginPath(); ); ); ); 39 ctx.fill();

View Code

效果图

3.1 解决方法一：使用beginPath()，开启新的路径，两次绘制的图形就不会相互产生影响

Document); ); ); ); ctx.stroke(); 23 ctx.beginPath(); ,Math.PI); 25 ctx.stroke();

View Code

效果图

3.2 解决方法一：使用moveTo(),将上一个图形的终点移动到下一个即将绘制的图形上，就可以解决问题,效果与上面的解决方法相同。但是，该方法只需要使用一次stroke().

Document); ); ); ); ); ,Math.PI); 24 ctx.stroke();

View Code

3.3 arc的一个小应用，绘制圆环进度条，使用了lineWidth

Document); ); toRad(d) { ; 24 } , , , ; () { ,myCanvas.width,myCanvas.height); 31 ctx.beginPath(); , toRad(angle)); ; ; 35 ctx.stroke(); ; ; ; ; , x, y); ) { 44 clearInterval(timeId) 45 } 46 else{ ; 48 } );

View Code

效果图

4. arcTo()的使用

arcTo绘制圆角，需要线端点，矩形顶点以及另一线段的端点三个参考点