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笔记-非零环绕原则及剪纸实例相关推荐

填充路径时使用的非零环绕规则
如果当前路径是循环的,或者包含多个相交的子路径,那么Canvas的绘图环境变量就必须判断,当fill()方法被调用时,应该如何对当前路径进行填充. Canvas在填充互相有交叉的路径时,使用非零环绕规 ...
svpwm矢量控制电机相电压波形_SVPWM调制中的6个非零基础电压矢量的幅值到底是Udc还是2/3Udc ? 电压利用率为什么是1？...
16年抛出来的一个问题,无意间又看到了,感觉哪怕是个小问题,但是能去伪存真,能为更多认真的人所有用,那也是在改变世界其实也是因为看到这位兄台的留言,更加激发了我要写这篇文章:隐隐的感受,其实世界上, ...
鸟哥的LINUX私房菜基础学习篇读书笔记 -- 第零章计算机概论（一）
鸟哥的LINUX私房菜基础学习篇读书笔记 -- 第零章计算机概论 (一) 第零章计算机概论 0.1 电脑:辅助人脑的好工具 0.1.1 计算机硬件五大组成部分 0.1.2 一切设计的起点: C ...
CSP 202109-2 非零段划分
题目链接:非零段划分题目描述 A1,A2,⋯,An 是一个由 n 个自然数(非负整数)组成的数组.我们称其中 Ai,⋯,Aj 是一个非零段,当且仅当以下条件同时满足: 1≤i≤j≤n: 对于任意的整 ...
一种递归式的非零自然数全分解方法
一种递归式的非零自然数全分解方法在开始讲之前,首先介绍一下这个方法针对的问题背景:一个非零自然数(1,2,3,--)既不重复也不遗漏地任意分解为非零自然数(如:3=1+1+1=1+2),我在本篇 ...
最简单太阳系H5动画canvas详解零基础可入
最简单太阳系H5动画canvas详解零基础可入最终结果:(实际为动画效果,金星绕轨道转动) 页面准备/html 要使用canvas,需要首先在页面中要绘制的位置放入canvas标签元素,在后期的绘 ...
【 MATLAB 】any 函数介绍（确定是否有任意数组元素非零）
any Determine if any array elements are nonzero(确定是否有任何数组元素非零) Syntax B = any(A) B = any(A,dim) Desc ...
Keil MDK下如何设置非零初始化变量（转）
源:Keil MDK下如何设置非零初始化变量一些工控产品,当系统复位后(非上电复位),可能要求保持住复位前RAM中的数据,用来快速恢复现场,或者不至于因瞬间复位而重启现场设备.而keil mdk在默 ...
[物理学与PDEs]第3章习题1 只有一个非零分量的磁场
设磁场 ${\bf H}$ 只有一个非零分量, 试证明 $$\bex ({\bf H}\cdot\n){\bf H}={\bf 0}. \eex$$ 证明: 不妨设 ${\bf H}=(0,0,H_3 ...

canvas笔记-非零环绕原则及剪纸实例

canvas笔记-非零环绕原则及剪纸实例相关推荐

最新文章

热门文章