详解HTML5 Canvas绘图不规律图型时的非零围绕标准

日期：2021-01-19 类型：科技新闻 

关键词：网站建设，创建网站，免费建站平台，智能建站，企业建网站

相对路径方位与非零围绕标准
平常大家画的图型全是循规蹈矩的，那末假如大家用线条画了个抽象性派著作，就像下面这图1样，童鞋们了解如何用fill()染色呢？

这里就要用到数学课上的1个方式——非零围绕标准，来分辨哪块地区是里边，哪块地区是外面。接下来，大家实际看来下甚么是是非非零围绕标准。

最先，大家得给图型明确1条相对路径，要是“1笔划”而且“不走反复线路”便可以了。如图，标明的是在其中的1种相对路径方位。大家先假设相对路径的正方位为1（实际上为⑴啥的也都可以以，正负方位互为相反数，并不是0就行），那末反向便是其相反数⑴。
随后，大家在子相对路径激光切割的几块地区内的随意1点各取1条方位随意的射线，这里我只取了3个地区的射线为例，来分辨这3块地区是“里边”還是“外面”。
接下来，大家就来分辨了。S1中引出的射线L1，与S1的子相对路径的正方位交叉，那末大家就给计数器+1，結果为+1，出外面。
S2中引出的射线L2，与两纸条相对路径的正方位交叉，计数器+2，結果为+2，出外面。
S3中引出的射线L3，与两纸条相对路径交叉，可是在其中有1条的反向，计数器+1⑴，結果为0，在里边。没错，要是結果不为0，该射线所属的地区就出外面。


绘图圆环
记得arc方式吗？它的最终1个主要参数便是分辨是相对路径方位的，假如是相对路径相反的两个同舟圆在1起，图着色会有甚么奇异的实际效果呢？

下面大家根据编码来完成它。

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  5.     <title>圆环</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的访问器竟然不适用Canvas？！赶紧换1个吧！！   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         context.shadowColor = "#545454";   
  28.         context.shadowOffsetX = 5;   
  29.         context.shadowOffsetY = 5;   
  30.         context.shadowBlur = 2;   
  31.   
  32.         context.arc(400, 300, 200, 0, Math.PI * 2 ,false);   
  33.         context.arc(400, 300, 230, 0, Math.PI * 2 ,true);   
  34.         context.fillStyle = "#00AAAA";   
  35.         context.fill();   
  36.     };   
  37. </script>   
  38. </body>   
  39. </html>  

运作結果：

镂空剪纸实际效果
接下来，大家运用非零围绕标准和黑影来绘图1个镂空的剪纸实际效果。

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  5.     <title>镂空剪纸实际效果</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的访问器竟然不适用Canvas？！赶紧换1个吧！！   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         context.beginPath();   
  28.         context.rect(200,100,400,400);   
  29.         drawPathRect(context, 250, 150, 300, 150);   
  30.         drawPathTriangle(context, 345, 350, 420, 450, 270, 450);   
  31.         context.arc(500, 400, 50, 0, Math.PI * 2, true);   
  32.         context.closePath();   
  33.   
  34.         context.fillStyle = "#058";   
  35.         context.shadowColor = "gray";   
  36.         context.shadowOffsetX = 10;   
  37.         context.shadowOffsetY = 10;   
  38.         context.shadowBlur = 10;   
  39.         context.fill();   
  40.   
  41.     };   
  42.   
  43.     //逆时针绘图矩形框   
  44.     function drawPathRect(cxt, x, y, w, h){   
  45.         /**  
  46.          * 这里不可以应用beginPath和closePath，  
  47.          * 要不然就不属于子相对路径而是另外一个全新升级的相对路径，  
  48.          * 没法应用非零围绕标准  
  49.          */  
  50.         cxt.moveTo(x, y);   
  51.         cxt.lineTo(x, y + h);   
  52.         cxt.lineTo(x + w, y + h);   
  53.         cxt.lineTo(x + w, y);   
  54.         cxt.lineTo(x, y);   
  55.   
  56.     }   
  57.   
  58.     //逆时针绘图3角形   
  59.     function drawPathTriangle(cxt, x1, y1, x2, y2, x3, y3){   
  60.         cxt.moveTo(x1,y1);   
  61.         cxt.lineTo(x3,y3);   
  62.         cxt.lineTo(x2,y2);   
  63.         cxt.lineTo(x1,y1);   
  64.     }   
  65.   
  66. </script>   
  67. </body>   
  68. </html>  

运作結果：

这内行动绘图矩形框的缘故是大家要想获得逆时针相对路径的矩形框，并且API出示的rect()方式绘图是顺时针矩形框。此外，必须留意的是，这个剪纸是1个图型，1个相对路径。不可以在绘图镂空3角形和绘图镂空矩形框的方式里应用beginPath()和closePath()，要不然它们就会是新的相对路径、新的图型，而并不是剪纸的子相对路径、子图型，就没法应用非零围绕标准。


上一篇：H5 meta小结(前端开发必看篇) 返回下一篇：没有了