简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > Web Front-end > H5 Tutorial > body text

详解HTML5 Canvas绘制不规则图形时的非零环绕原则_html5教程技巧

WBOY
Release： 2016-05-23 14:20:21
Original
4107 people have browsed it

路径方向与非零环绕原则
平时我们画的图形都是规规矩矩的，那么如果我们用线条画了个抽象派作品，就像下面这图一样，童鞋们知道怎么用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. nbsp;html>   
  2. "zh">   
  3.   
  4.     "UTF-8">   
  5.     圆环   
  6.     
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.        
  10.   
  11.   
  12. "canvas-warp">   
  13.     "canvas">   
  14.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  15.        
  
  •   
  •     window.onload = function(){   
  •         var canvas = document.getElementById("canvas");   
  •         canvas.width = 800;   
  •         canvas.height = 600;   
  •         var context = canvas.getContext("2d");   
  •         context.fillStyle = "#FFF";   
  •         context.fillRect(0,0,800,600);   
  •   
  •         context.shadowColor = "#545454";   
  •         context.shadowOffsetX = 5;   
  •         context.shadowOffsetY = 5;   
  •         context.shadowBlur = 2;   
  •   
  •         context.arc(400, 300, 200, 0, Math.PI * 2 ,false);   
  •         context.arc(400, 300, 230, 0, Math.PI * 2 ,true);   
  •         context.fillStyle = "#00AAAA";   
  •         context.fill();   
  •     };   
  •   
  •   
  •   

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

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

    JavaScript Code复制内容到剪贴板
    1. nbsp;html>   
    2. "zh">   
    3.   
    4.     "UTF-8">   
    5.     镂空剪纸效果   
    6.     
    7.         body { background: url("./images/bg3.jpg") repeat; }  
    8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    9.        
    10.   
    11.   
    12. "canvas-warp">   
    13.     "canvas">   
    14.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    15.        
      
  •   
  •     window.onload = function(){   
  •         var canvas = document.getElementById("canvas");   
  •         canvas.width = 800;   
  •         canvas.height = 600;   
  •         var context = canvas.getContext("2d");   
  •         context.fillStyle = "#FFF";   
  •         context.fillRect(0,0,800,600);   
  •   
  •         context.beginPath();   
  •         context.rect(200,100,400,400);   
  •         drawPathRect(context, 250, 150, 300, 150);   
  •         drawPathTriangle(context, 345, 350, 420, 450, 270, 450);   
  •         context.arc(500, 400, 50, 0, Math.PI * 2, true);   
  •         context.closePath();   
  •   
  •         context.fillStyle = "#058";   
  •         context.shadowColor = "gray";   
  •         context.shadowOffsetX = 10;   
  •         context.shadowOffsetY = 10;   
  •         context.shadowBlur = 10;   
  •         context.fill();   
  •   
  •     };   
  •   
  •     //逆时针绘制矩形   
  •     function drawPathRect(cxt, x, y, w, h){   
  •         /**  
  •          * 这里不能使用beginPath和closePath，  
  •          * 不然就不属于子路径而是另一个全新的路径，  
  •          * 无法使用非零环绕原则  
  •          */  
  •         cxt.moveTo(x, y);   
  •         cxt.lineTo(x, y + h);   
  •         cxt.lineTo(x + w, y + h);   
  •         cxt.lineTo(x + w, y);   
  •         cxt.lineTo(x, y);   
  •   
  •     }   
  •   
  •     //逆时针绘制三角形   
  •     function drawPathTriangle(cxt, x1, y1, x2, y2, x3, y3){   
  •         cxt.moveTo(x1,y1);   
  •         cxt.lineTo(x3,y3);   
  •         cxt.lineTo(x2,y2);   
  •         cxt.lineTo(x1,y1);   
  •     }   
  •   
  •   
  •   
  •   

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

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


    Related labels：
    canvas html5
    source：php.cn
    Previous article：HTML5单页面手势滑屏切换原理 _html5教程技巧 Next article：HTML5 canvas实现移动端上传头像拖拽裁剪效果_html5教程技巧
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Latest Issues
    How to set HTML5's required attribute using Javascript? I'm trying to mark a text input box as required in Javascript. <inputid="edName&qu...
    From 2023-10-13 08:52:25
    0
    2
    317
    Problem with not getting accurate mouse coordinates: using HTML5 canvas when resizing the page I want to create this pixel effect from a front-end expert. Although I can achieve the ent...
    From 2023-09-12 12:20:33
    0
    1
    280
    HTML5 video M3U8 encoded with Base64 I want to add a base64 encoded M3U8 file in the Video tag of HTML5, how can I do it<!DO...
    From 2023-09-09 23:07:18
    0
    1
    247
    vue.js/bootstrap: onclick event method not called, error "Variable not found: updateDocument" I'm new to front-end development but have basic understanding of HTML5, CSS and Javascript...
    From 2023-09-09 20:06:48
    0
    1
    362
    Remove closing slash '/' from image tag in XHTML I have a string txt1 that stores an image. Its value is in XHTML format, i.e. the element ...
    From 2023-09-06 12:15:38
    0
    1
    240
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn：Public welfare online PHP training，Help PHP learners grow quickly！