学习HTML5中canvas会遇到的问题

这期内容当中小编将会给大家带来有关学习HTML5中canvas会遇到的问题，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

成都创新互联公司专业为企业提供屯昌网站建设、屯昌做网站、屯昌网站设计、屯昌网站制作等企业网站建设、网页设计与制作、屯昌企业网站模板建站服务，十多年屯昌做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

1. 非零环绕原则(nonzZero rule)

• 非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据。

• 在判断填充的区域拉一条线出来，拉到图形的外面，这条拉出来的线就是辅助线。判断绘制的线是否是从辅助线的左边穿过到辅助线的右边，此时这种穿过的方式记录为+1;如果是从辅助线的右边穿到辅助线的左边，就记做-1.最后将所有记录的数字进行求和，如果求和的结果为0，代表这块区域不要填充，否则，必须填充

• 上面的原理较难理解，可以这样理解，当在大矩形中绘制小矩形，大矩形的绘制方向与小矩形的绘制方向相同时，填充颜色后，大小矩形都填充相同颜色；大矩形的绘制方向与小矩形的绘制方向相反时，填充颜色后，小矩形不会填充颜色，大矩形与小矩形之间的区域会填充颜色。

• 大矩形的绘制方向与小矩形的绘制方向相同时的代码

• 

   1  2  3  4  5  6  7  8  9 10 11 12 28 29 30 

  View Code

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

• 

• 大矩形的绘制方向与小矩形的绘制方向相反时的代码

• 

   1  2  3  4  5  6  7  8  9 10 11 12 28 29 30 

  View Code

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

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

• closePath与lineTo闭合是有区别的,closePath闭合自然，lineTo闭合会有锯齿,仅在闭合的连接处会有区别

• 效果图

• 

• 

   1  2  3  4  5  6  7 14 15 16 17 18 33 34 

  View Code

3. arc绘图的注意事项

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

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

• 

   1  2  3  4  5  6 13 14 15 16 41 42 

  View Code

• 效果图

• 

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

 1  2  3  4  5  6 13 14 15 16 27 28 

View Code

效果图

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

 1  2  3  4  5  6 13 14 15 16 26 27 

View Code

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

 1  2  3  4  5  6  7 14 15 16 17 18 51 52 53 

View Code

效果图

绘图方法

canvas画布提供了一个用来作图的平面空间，该空间的每个点都有自己的坐标，x表示横坐标，y表示竖坐标。原点(0, 0)位于图像左上角，x轴的正向是原点向右，y轴的正向是原点向下。

（1）绘制路径

beginPath方法表示开始绘制路径，moveTo(x, y)方法设置线段的起点，lineTo(x, y)方法设置线段的终点，stroke方法用来给透明的线段着色。

ctx.beginPath(); // 开始路径绘制

ctx.moveTo(20, 20); // 设置路径起点，坐标为(20,20)

ctx.lineTo(200, 20); // 绘制一条到(200,20)的直线

ctx.lineWidth = 1.0; // 设置线宽

ctx.strokeStyle = '#CC0000'; // 设置线的颜色

ctx.stroke(); // 进行线的着色，这时整条线才变得可见

moveto和lineto方法可以多次使用。最后，还可以使用closePath方法，自动绘制一条当前点到起点的直线，形成一个封闭图形，省却使用一次lineto方法。

（2）绘制矩形

fillRect(x, y, width, height)方法用来绘制矩形，它的四个参数分别为矩形左上角顶点的x坐标、y坐标，以及矩形的宽和高。fillStyle属性用来设置矩形的填充色。

ctx.fillStyle = 'yellow';

ctx.fillRect(50, 50, 200, 100);

strokeRect方法与fillRect类似，用来绘制空心矩形。

ctx.strokeRect(10,10,200,100);

clearRect方法用来清除某个矩形区域的内容。

ctx.clearRect(100,50,50,50);

4. arcTo()的使用

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

• 

   1  2  3  4  5      6      7     14 15 16 17     18     64 65 66 

  View Code

• 效果图

• 

上述就是小编为大家分享的学习HTML5中canvas会遇到的问题了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。