学习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

效果图

所能网络客户管理系统

在原金领办公系统上增加的客户管理系统，其中包括客户管理，文档管理，表格管理，分超级管理员（总经办），管理员（部门经理），普通用户（员工），强大的检索功能，各种条件检索，普通用户删除的客户资料，超级管理员能在回收站中恢复，有效的保证了员工离职使客户资源丢失问题。超级管理员：ao密码：123456

下载

立即学习“前端免费学习笔记（深入）”；

绘图方法

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

   

  立即学习“前端免费学习笔记（深入）”；

• 效果图

• 

立即学习“前端免费学习笔记（深入）”；