canvas系类-非零坏绕原则（一）

灰太狼 2021-09-11 08:08 247阅读 0赞

非零环绕原则：  
图形范围区域中，从该区域随意描点画出一条足够长的线段，再观察此线段是否与图形的路径相交，根据逆时针方向为负（-1），顺时针方向为正  
（1），再把相交的值相加。如果相加为0，则这个范围不填充颜色，如果不为0则填充颜色

![20170227153348206][]

从图中可知：

线段1：相交俩个不同的方向，-1+1=0,，所以不填充

线段2：相交逆时针方向，-1+0=-1，所以填充

根据上面的原理，演示画一个环形图的实例

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body> <canvas id="canvas"></canvas> <script type="text/javascript"> //1.获取canvas上下文， var dom=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var ctx=dom.getContext('2d');//获取canvas上下文的内容 ctx.beginPath(); ctx.arc(400,400,300,0,Math.PI*2,false); ctx.arc(400,400,150,0,Math.PI*2,true); //False = 顺时针，true = 逆时针。 ctx.closePath(); ctx.fillStyle="#058"; ctx.shadowColor="gray"; ctx.shadowOffsetX=10; ctx.shadowOffsetY=10; ctx.shadowBlur=10; ctx.fill(); </script> </body> </html>

![20170227152538287][]

[20170227153348206]: /images/20210813/5be048c331d64af0bf05975dfd424a80.png
[20170227152538287]: /images/20210813/487a78c0be394e7493d4a3652a6e9129.png

发表评论取消回复

表情：

评论列表（有 0 条评论，247人围观）

还没有评论，来说两句吧...

相关阅读

相关利用MAP函数计算一系类数字的平方

1 问题如何使用map函数计算一系列数字平方。 2 方法通过使用定义函数（add），创建一个list，包含这一系列数字，再使用map函数。 ![ce0384bc9a

痛定思痛。/ 2024年03月16日 23:47/ 0 赞/ 13 阅读

相关平面直角系【坐标系旋转】、【点绕坐标系旋转】、【A点绕B点旋转】

前言本文整理在平面直角系中，坐标系旋转、某点绕着坐标系旋转、坐标点A 绕着点B旋转，求旋转后的点坐标。看了网上好的文章，发现部分有误或不完整，这里简单总结一下。

àì夳堔傛蜴生んèń/ 2023年01月17日 06:23/ 0 赞/ 148 阅读

相关 yolo系类问答摘抄

课程上笔记，总结一下： 1. 图像划分网格是通过主干网中的卷积层来实现的嘛？基本原理是怎样的呢？是的，以yolo v1为例，输入的图像尺寸为448x448，经过6层卷

痛定思痛。/ 2022年10月07日 10:52/ 0 赞/ 58 阅读

相关 Oracle 坏快修复之数据坏快检查（一）

1.检测Oracle 数据库坏快的方法有以下2种： a）DBV（DB File Verify）工具外部命令，物理介质数据结构完整性检查；只能用于数据文件（off

青旅半醒/ 2022年07月12日 12:00/ 0 赞/ 284 阅读

相关高并发商城实战系类

高并发商城实战系类，想要的可以加我公众号，发送“商城实战”关键字即可。 ![70][] 对文章有什么疑问或者想要看更多文章可以加我订阅号，欢迎大家的踩踩~ ![70

谁践踏了优雅/ 2022年05月25日 08:17/ 0 赞/ 123 阅读

相关 html5的canvas知识总结（8）isPointInPath、isPointInStroke、解决canvas高分屏模糊、非零环绕原则

1. ctx.isPointInPath(80,80)：判断点是否在上面路径的区域内。 ctx.isPointInStroke(80,50)：判断点是否在上面路径的边缘线

忘是亡心i/ 2022年05月12日 06:58/ 0 赞/ 345 阅读

相关 canvas系类-非零坏绕原则（二）制作剪纸效果

![20170227154030806][] 根据[canvas系类-非零坏绕原则（一）][canvas_-]，我们可以制作出剪纸的效果：分析此图：要得到内图形没有填充的

悠悠/ 2021年09月11日 08:10/ 0 赞/ 221 阅读

相关 canvas系类-加载/裁剪图片(二)

图片裁剪：clip() 方法从原始画布中剪切任意形状和尺寸。裁切路径和普通的 canvas图形差不多，不同的是它的作用是遮罩，用来隐藏没有遮罩的部分。提示：一

短命女/ 2021年09月11日 08:10/ 0 赞/ 243 阅读

相关 canvas系类-非零坏绕原则（一）

非零环绕原则：图形范围区域中，从该区域随意描点画出一条足够长的线段，再观察此线段是否与图形的路径相交，根据逆时针方向为负（-1），顺时针方向为正（1），再把相交的值

灰太狼/ 2021年09月11日 08:08/ 0 赞/ 248 阅读

相关 canvas系类-加载/裁剪图片一

一.知识点： ![20170227102100237][] 二.操作 1.获取图片的方式 ①创建一个新的 HTMLImageElement 对象。要实现这个方法，

朴灿烈づ我的快乐病毒、/ 2021年09月11日 08:04/ 0 赞/ 282 阅读