学习HTML5中canvas会遇到的问题
这期内容当中小编将会给大家带来有关学习HTML5中canvas会遇到的问题,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
成都创新互联公司专业为企业提供屯昌网站建设、屯昌做网站、屯昌网站设计、屯昌网站制作等企业网站建设、网页设计与制作、屯昌企业网站模板建站服务,十多年屯昌做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
1. 非零环绕原则(nonzZero rule)
非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据。
在判断填充的区域拉一条线出来,拉到图形的外面,这条拉出来的线就是辅助线。判断绘制的线是否是从辅助线的左边穿过到辅助线的右边,此时这种穿过的方式记录为+1;如果是从辅助线的右边穿到辅助线的左边,就记做-1.最后将所有记录的数字进行求和,如果求和的结果为0,代表这块区域不要填充,否则,必须填充
上面的原理较难理解,可以这样理解,当在大矩形中绘制小矩形,大矩形的绘制方向与小矩形的绘制方向相同时,填充颜色后,大小矩形都填充相同颜色;大矩形的绘制方向与小矩形的绘制方向相反时,填充颜色后,小矩形不会填充颜色,大矩形与小矩形之间的区域会填充颜色。
大矩形的绘制方向与小矩形的绘制方向相同时的代码
- View Code
1 2 3 4 5 6
非零环绕原则 7 8 9 10 12 28 29 30 大矩形的绘制方向与小矩形的绘制方向相同时的效果图
大矩形的绘制方向与小矩形的绘制方向相反时的代码
- View Code
1 2 3 4 5 6
非零环绕原则 7 8 9 10 12 28 29 30 大矩形的绘制方向与小矩形的绘制方向相反时效果图
2. closePath() 与 lineTo()的区别
closePath与lineTo闭合是有区别的,closePath闭合自然,lineTo闭合会有锯齿,仅在闭合的连接处会有区别
效果图
- View Code
1 2 3 4 5 6
Document 7 14 15 16 17 18 33 34
3. arc绘图的注意事项
使用 arc 绘图的时候, 如果没有设置 moveTo ,那么会从开始绘弧的地方作为起始点,连线到圆弧的起点.
如果使用 stroke 方法, 那么会连线到圆弧的起始位置. 如果是 fill 方法, 会自动闭合路径填充.
- View Code
1 2 3 4 5
Document 6 13 14 15 16 41 42 效果图
3.1 解决方法一:使用beginPath(),开启新的路径,两次绘制的图形就不会相互产生影响
1 2 3 4 5Document 6 13 14 15 16 27 28
效果图
3.2 解决方法一:使用moveTo(),将上一个图形的终点移动到下一个即将绘制的图形上,就可以解决问题,效果与上面的解决方法相同。但是,该方法只需要使用一次stroke().
1 2 3 4 5Document 6 13 14 15 16 26 27
3.3 arc的一个小应用,绘制圆环进度条,使用了lineWidth
1 2 3 4 5 6Document 7 14 15 16 17 18 51 52 53
效果图
绘图方法
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绘制圆角,需要线端点,矩形顶点以及另一线段的端点三个参考点
- View Code
1 2 3 4 5 6
Document 7 14 15 16 17 18 64 65 66 效果图
上述就是小编为大家分享的学习HTML5中canvas会遇到的问题了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。
网站名称:学习HTML5中canvas会遇到的问题
网站路径:http://myzitong.com/article/poohcc.html