Summary of canvas problems in HTML5

Problems encountered when learning HTML5 canvas

1. Non-zero wrapping principle (nonzZero rule)

• The non-zero wrapping principle is canvas The basis for judging whether to perform filling when filling.

• Draw a line out of the area where the filling is determined and pull it out of the graphic. This drawn line is the auxiliary line. Determine whether the drawn line crosses from the left side of the auxiliary line to the right side of the auxiliary line. At this time, this crossing method is recorded as +1; if it crosses from the right side of the auxiliary line to the left side of the auxiliary line, it is recorded as - 1. Finally, sum up all the recorded numbers. If the summation result is 0, it means that this area should not be filled. Otherwise, it must be filled.

• The above principle is difficult to understand. It can be understood that when a small rectangle is drawn in a large rectangle and the drawing direction of the large rectangle is the same as that of the small rectangle, after filling the color, the large and small rectangles are filled with the same color; the drawing direction of the large rectangle is opposite to that of the small rectangle. When, after filling with color, the small rectangle will not be filled with color, and the area between the large rectangle and the small rectangle will be filled with color.

• Code when the drawing direction of the large rectangle is the same as the drawing direction of the small rectangle

• 

   1 nbsp;html> 2  3  4  5 <meta> 6 <title>非零环绕原则</title> 7  8  9 10 <canvas>11 </canvas>12 <script>13 var canvas = document.getElementById(&#39;canvas&#39;);14 var ctx = canvas.getContext(&#39;2d&#39;);15 ctx.moveTo(100, 100);16 ctx.lineTo(100, 400);17 ctx.lineTo(400, 400);18 ctx.lineTo(400, 100);19 ctx.lineTo(100, 100);20 21 ctx.moveTo(200, 200);22 ctx.lineTo(300, 300);23 ctx.lineTo(300, 300);24 ctx.lineTo(300, 200);25 ctx.lineTo(200, 200);26 ctx.fill();27 </script>28 29 30 

  View Code

• The rendering when the drawing direction of the large rectangle is the same as the drawing direction of the small rectangle

• 

• Code when the drawing direction of the large rectangle is opposite to the drawing direction of the small rectangle

• 

   1 nbsp;html> 2  3  4  5 <meta> 6 <title>非零环绕原则</title> 7  8  9 10 <canvas>11 </canvas>12 <script>13 var canvas = document.getElementById(&#39;canvas&#39;);14 var ctx = canvas.getContext(&#39;2d&#39;);15 ctx.moveTo(100, 100);16 ctx.lineTo(100, 400);17 ctx.lineTo(400, 400);18 ctx.lineTo(400, 100);19 ctx.lineTo(100, 100);20 21 ctx.moveTo(200, 200);22 ctx.lineTo(300, 200);23 ctx.lineTo(300, 300);24 ctx.lineTo(200, 300);25 ctx.lineTo(200, 200);26 ctx.fill();27 </script>28 29 30 

  View Code

• When the drawing direction of the large rectangle is opposite to that of the small rectangle Rendering

• 
  

#2. closePath() and The difference between lineTo()

• There is a difference between closePath and lineTo closing, closePath closes naturally, lineTo closes will have jagged edges ,There will be a difference only at the closed connection

• Rendering

• 

• 

   1 nbsp;html> 2  3  4  5 <meta> 6 <title>Document</title> 7 <style> 8 canvas { 9 display: block;10 margin: 100px auto;11 border: 1px solid #000;12 }13 </style>14 15 16 17 <canvas></canvas>18 <script>19 var myCanvas = document.getElementById("myCanvas");20 var ctx = myCanvas.getContext(&#39;2d&#39;);21 ctx.lineWidth = 20;22 ctx.moveTo(100, 100);23 ctx.lineTo(100, 100 + 100);24 ctx.lineTo(100 + 100, 100 + 100);25 ctx.lineTo(100, 100);26 27 ctx.moveTo(300, 100);28 ctx.lineTo(300, 100 + 100);29 ctx.lineTo(300 + 100, 100 + 100);30 ctx.closePath();31 ctx.stroke();32 </script>33 34 

  View Code

##3. Notes on arc drawing

• When using arc drawing, if moveTo is not set, the starting point of arc drawing will be used as the starting point, and the line will be connected to The starting point of the arc.

• If the stroke method is used, the line will be connected to the starting position of the arc. If the fill method is used, the path will be automatically closed and filled.

• 

   1 nbsp;html> 2  3  4 <meta> 5 <title>Document</title> 6 <style> 7 canvas{ 8 display: block; 9 margin: 0 auto;10 border: 1px solid #666;11 }12 </style>13 14 15 <canvas></canvas>16 <script>17 var myCanvas = document.getElementById("myCanvas");18 var ctx = myCanvas.getContext(&#39;2d&#39;);19 ctx.moveTo(50,100);20 ctx.lineTo(100,100);21 ctx.arc(150,150,50,0,Math.PI);22 ctx.stroke();23 24 ctx.moveTo(200,100);25 ctx.lineTo(300,100);26 ctx.arc(300,150,50,0,Math.PI*1.2);27 ctx.stroke();28 29 ctx.beginPath();30 ctx.moveTo(400,100);31 ctx.lineTo(500,100);32 ctx.arc(500,150,50,0,Math.PI*1.2);33 ctx.fill();34 35 ctx.beginPath();36 ctx.moveTo(600,50);37 ctx.lineTo(700,100);38 ctx.arc(700,150,50,0,Math.PI*1.2);39 ctx.fill();40 </script>41 42 

  View Code

   

• 效果图

• 

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


 1 nbsp;html> 2  3  4 <meta> 5 <title>Document</title> 6 <style> 7 canvas{ 8 display: block; 9 margin: 0 auto;10 border: 1px solid #666;11 }12 </style>13 14 15 <canvas></canvas>16 <script>17 var myCanvas = document.getElementById("myCanvas");18 var ctx = myCanvas.getContext(&#39;2d&#39;);19 ctx.moveTo(50,100);20 ctx.lineTo(100,100);21 //使用beginPath(),多添加的两句代码22 ctx.stroke();23 ctx.beginPath();24 ctx.arc(150,150,50,0,Math.PI);25 ctx.stroke();26 </script>27 28 
View Code

效果图



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


 1 nbsp;html> 2  3  4 <meta> 5 <title>Document</title> 6 <style> 7 canvas{ 8 display: block; 9 margin: 0 auto;10 border: 1px solid #666;11 }12 </style>13 14 15 <canvas></canvas>16 <script>17 var myCanvas = document.getElementById("myCanvas");18 var ctx = myCanvas.getContext(&#39;2d&#39;);19 ctx.moveTo(50,100);20 ctx.lineTo(100,100);21 //添加moveTO()这一句代码即可22 ctx.moveTo(200,150);23 ctx.arc(150,150,50,0,Math.PI);24 ctx.stroke();25 </script>26 27 
View Code

 

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


 1 nbsp;html> 2  3  4  5 <meta> 6 <title>Document</title> 7 <style> 8 canvas { 9 display: block;10 margin: 0 auto;11 border: 1px solid #666;12 }13 </style>14 15 16 17 <canvas></canvas>18 <script>19 var myCanvas = document.getElementById("myCanvas");20 var ctx = myCanvas.getContext(&#39;2d&#39;);21 22 function toRad(d) {23 return d * Math.PI / 180;24 }25 var x = 200,26 y = 200,27 angle = 0,28 percent = 0;29 var timeId = setInterval(function() {30 ctx.clearRect(0,0,myCanvas.width,myCanvas.height);31 ctx.beginPath();32 ctx.arc(x, y, 120, 0, toRad(angle));33 ctx.strokeStyle = &#39;#00f&#39;;34 ctx.lineWidth = 40;35 ctx.stroke();36 37 ctx.fillStyle = &#39;#f00&#39;;38 ctx.font = &#39;700 30px Arial&#39;;39 ctx.textAlign = &#39;center&#39;;40 ctx.textBaseline = &#39;middle&#39;;41 percent = Math.floor(angle /360*100);42 ctx.fillText(percent + &#39;%&#39;, x, y);43 if (percent >= 100) {44 clearInterval(timeId)45 }46 else{47 angle++;48 }49 }, 20);50 </script>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 nbsp;html> 2  3  4  5     <meta> 6     <title>Document</title> 7     <style> 8     canvas { 9         display: block;10         margin: 0 auto;11         border: 1px solid #666;12     }13     </style>14 15 16 17     <canvas></canvas>18     <script>19     var myCanvas = document.getElementById("myCanvas");20     var ctx = myCanvas.getContext(&#39;2d&#39;);21 22     function toRad(d) {23         return d * Math.PI / 180;24     }25 26     function circleRect(x, y, width, height, r, color) {27         //保存之前的绘图状态28         ctx.save();29         ctx.beginPath();30         //绘制四条边31         ctx.moveTo(x + r, y);32         ctx.lineTo(x + width - r, y);33 34         ctx.moveTo(x + r, y + height);35         ctx.lineTo(x + width - r, y + height);36 37         ctx.moveTo(x, y + r);38         ctx.lineTo(x, y + height - r);39 40         ctx.moveTo(x + width, y + r);41         ctx.lineTo(x + width, y + height - r);42 43         ctx.moveTo(x + r, y);44         ctx.arcTo(x, y, x, y + r, r);45 46         ctx.moveTo(x + width - r, y);47         ctx.arcTo(x + width, y, x + width, y + r, r);48 49         ctx.moveTo(x, y + height - r);50         ctx.arcTo(x, y + height, x + r, y + height, r);51 52         ctx.moveTo(x + width - r, y + height);53         ctx.arcTo(x + width, y + height, x + width, y + height - r, r);54         //传入颜色，则使用传入的颜色；否则使用默认黑色55         ctx.strokeStyle = color || &#39;#000&#39;;56         ctx.stroke();57         //恢复之前的绘图状态58         ctx.restore();59     }60 61     circleRect(100, 100, 200, 200, 50, &#39;red&#39;);62     circleRect(300, 300, 100, 100, 25);63     </script>64 65 66 

  View Code

   

• 效果图

•