canvas笔记-非零环绕原则及剪纸实例
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-非零环绕原则及剪纸实例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
首先提下非零環繞原則，如下圖：
這里如上面的圖，這個非零環繞和畫圖的方向有關！
如+1要染色的地方，在這里找一個點射向外邊，如果相交的地方畫圖方向和射線方向一樣就是+1，要染色。
+2那個地方，也是那樣。
0為不染色，因為一個+1一個-1，只要不是0就要染色，這就是非零環繞原則。
?
下面給出兩個實例
程序運行截圖如下：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.beginPath();context.arc(400, 400, 300, 0, Math.PI * 2, false);context.arc(400, 400, 150, 0, Math.PI * 2, true);context.fillStyle = "#058";context.shadowColor = "gray";context.shadowOffsetX = 10;context.shadowOffsetY = 10;context.shadowBlur = 10;context.fill();}</script></body> </html>第二個實例運行截圖如下；
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.beginPath();context.rect(100, 100, 600, 600);pathRect(context, 200, 200, 400, 200);pathTriangle(context, 300, 450, 150, 650, 450, 650);context.arc(550, 550, 100, 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 pathRect(cxt, x, y, width, height){cxt.moveTo(x, y);cxt.lineTo(x, y + height);cxt.lineTo(x + width, y + height);cxt.lineTo(x + width, y);cxt.lineTo(x, y);}function pathTriangle(cxt, x1, y1, x2, y2, x3, y3){cxt.moveTo(x1, y1);cxt.lineTo(x2, y2);cxt.lineTo(x3, y3);cxt.lineTo(x1, y1);}</script></body> </html>?
總結
以上是生活随笔為你收集整理的canvas笔记-非零环绕原则及剪纸实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux笔记-grep -v功能相关说
- 下一篇： MySQL笔记-centos7安装MyS