html5
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

详解HTML5 Canvas绘制不规则图形时的非零环绕原则

发布时间：2022-04-13 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了详解HTML5 Canvas绘制不规则图形时的非零环绕原则，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

路径方向与非零环绕原则
平时我们画的图形都是规规矩矩的，那么如果我们用线条画了个抽象派作品，就像下面这图一样，童鞋们知道怎么用fill()染色呢？
2016321115025779.jpg (344×331)

这里就要用到数学上的一个方法——非零环绕原则，来判断哪块区域是里面，哪块区域是外面。接下来，我们具体来看下什么是非零环绕原则。
2016321115056981.jpg (540×332)

首先，我们得给图形确定一条路径，只要“一笔画”并且“不走重复路线”就可以了。如图，标出的是其中的一种路径方向。我们先假定路径的正方向为1（其实为-1啥的也都可以，正负方向互为相反数，不是0就行），那么反方向就是其相反数-1。
然后，我们在子路径切割的几块区域内的任意一点各取一条方向任意的射线，这里我只取了三个区域的射线为例，来判断这三块区域是“里面”还是“外面”。
接下来，我们就来判断了。S1中引出的射线L1，与S1的子路径的正方向相交，那么我们就给计数器+1，结果为+1，在外面。
S2中引出的射线L2，与两条子路径的正方向相交，计数器+2，结果为+2，在外面。
S3中引出的射线L3，与两条子路径相交，但是其中有一条的反方向，计数器+1-1，结果为0，在里面。没错，只要结果不为0，该射线所在的区域就在外面。


绘制圆环
记得arc方法吗？它的最后一个参数就是判断是路径方向的，如果是路径相反的两个同心圆在一起，图上色会有什么神奇的效果呢？
2016321115120337.jpg (440×335)

下面我们通过代码来实现它。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE&nbsp;htML>   
  2. <html lang="zh">   
  3. <head>   
  4.     <;meta charset="UTF-8">   
  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？！赶快换一个吧！！   
  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>  

运行结果：
2016321115141524.jpg (850×500)

镂空剪纸效果
接下来，我们利用非零环绕原则和阴影来绘制一个镂空的剪纸效果。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  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？！赶快换一个吧！！   
  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.     //逆时针绘制三角形   
  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>  

运行结果：
2016321115159092.jpg (850×500)

这里手动绘制矩形的原因是我们想要得到逆时针路径的矩形，而且API提供的rect()方法绘制是顺时针矩形。另外，需要注意的是，这个剪纸是一个图形，一个路径。不能在绘制镂空三角形和绘制镂空矩形的方法里使用beginPath()和closePath()，不然它们就会是新的路径、新的图形，而不是剪纸的子路径、子图形，就无法使用非零环绕原则。


脚本宝典总结

以上是脚本宝典为你收集整理的详解HTML5 Canvas绘制不规则图形时的非零环绕原则全部内容，希望文章能够帮你解决详解HTML5 Canvas绘制不规则图形时的非零环绕原则所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的html5相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程
热门html5教程