网页制作

详解HTML5 Canvas绘制不规则图形时的非零环绕原则
网页制作 2024/11/15 佚名
3 2

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

这里就要用到数学上的一个方法——非零环绕原则，来判断哪块区域是里面，哪块区域是外面。接下来，我们具体来看下什么是非零环绕原则。
详解HTML5 Canvas绘制不规则图形时的非零环绕原则

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


绘制圆环
记得arc方法吗？它的最后一个参数就是判断是路径方向的，如果是路径相反的两个同心圆在一起，图上色会有什么神奇的效果呢？
详解HTML5 Canvas绘制不规则图形时的非零环绕原则

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

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.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>  

运行结果：
详解HTML5 Canvas绘制不规则图形时的非零环绕原则

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

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>  

运行结果：
详解HTML5 Canvas绘制不规则图形时的非零环绕原则

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


标签：
HTML5,Canvas
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com