主頁 > 知識庫 > 詳解HTML5 Canvas繪制不規(guī)則圖形時的非零環(huán)繞原則

詳解HTML5 Canvas繪制不規(guī)則圖形時的非零環(huán)繞原則
熱門標簽：貸款電銷人工和機器人哪個好 聯(lián)通400電話申請 高德地圖標注賓館位置 飛亞外呼系統(tǒng) 電話機器人如何 杭州營銷電銷機器人供應(yīng)商 百應(yīng)電銷機器人產(chǎn)業(yè) 西寧智能外呼系統(tǒng)加盟 電視購物電銷外呼系統(tǒng)

路徑方向與非零環(huán)繞原則
平時我們畫的圖形都是規(guī)規(guī)矩矩的，那么如果我們用線條畫了個抽象派作品，就像下面這圖一樣，童鞋們知道怎么用fill()染色呢？

這里就要用到數(shù)學(xué)上的一個方法——非零環(huán)繞原則，來判斷哪塊區(qū)域是里面，哪塊區(qū)域是外面。接下來，我們具體來看下什么是非零環(huán)繞原則。

首先，我們得給圖形確定一條路徑，只要“一筆畫”并且“不走重復(fù)路線”就可以了。如圖，標出的是其中的一種路徑方向。我們先假定路徑的正方向為1（其實為-1啥的也都可以，正負方向互為相反數(shù)，不是0就行），那么反方向就是其相反數(shù)-1。
然后，我們在子路徑切割的幾塊區(qū)域內(nèi)的任意一點各取一條方向任意的射線，這里我只取了三個區(qū)域的射線為例，來判斷這三塊區(qū)域是“里面”還是“外面”。
接下來，我們就來判斷了。S1中引出的射線L1，與S1的子路徑的正方向相交，那么我們就給計數(shù)器+1，結(jié)果為+1，在外面。
S2中引出的射線L2，與兩條子路徑的正方向相交，計數(shù)器+2，結(jié)果為+2，在外面。
S3中引出的射線L3，與兩條子路徑相交，但是其中有一條的反方向，計數(shù)器+1-1，結(jié)果為0，在里面。沒錯，只要結(jié)果不為0，該射線所在的區(qū)域就在外面。


繪制圓環(huán)
記得arc方法嗎？它的最后一個參數(shù)就是判斷是路徑方向的，如果是路徑相反的兩個同心圓在一起，圖上色會有什么神奇的效果呢？

下面我們通過代碼來實現(xiàn)它。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>圓環(huán)</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>  

運行結(jié)果：

鏤空剪紙效果
接下來，我們利用非零環(huán)繞原則和陰影來繪制一個鏤空的剪紙效果。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  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.          * 無法使用非零環(huán)繞原則  
  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>  

運行結(jié)果：

這里手動繪制矩形的原因是我們想要得到逆時針路徑的矩形，而且API提供的rect()方法繪制是順時針矩形。另外，需要注意的是，這個剪紙是一個圖形，一個路徑。不能在繪制鏤空三角形和繪制鏤空矩形的方法里使用beginPath()和closePath()，不然它們就會是新的路徑、新的圖形，而不是剪紙的子路徑、子圖形，就無法使用非零環(huán)繞原則。


標簽：煙臺 內(nèi)蒙古 玉溪 安慶 牡丹江 撫州 邯鄲 晉中

巨人網(wǎng)絡(luò)通訊聲明：本文標題《詳解HTML5 Canvas繪制不規(guī)則圖形時的非零環(huán)繞原則》，本文關(guān)鍵詞  詳解,HTML5,Canvas,繪制,不規(guī)則,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《詳解HTML5 Canvas繪制不規(guī)則圖形時的非零環(huán)繞原則》相關(guān)的同類信息！
  • 本頁收集關(guān)于詳解HTML5 Canvas繪制不規(guī)則圖形時的非零環(huán)繞原則的相關(guān)信息資訊供網(wǎng)民參考！
    • 推薦文章