Canvas 之非零环绕原则

最新推荐文章于 2024-07-19 16:36:18 发布
最新推荐文章于 2024-07-19 16:36:18 发布
阅读量133 收藏
点赞数
文章标签： python
原文链接：https://my.oschina.net/cj0072016/blog/646085
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

Canvas之非零环绕原则

案例

效果图

输入图片说明

思路分析

思路1

此图可以看成是两个圆，一个蓝色的圆和一个白色的圆，以及圆的阴影组成，因此我们可以先设置阴影，再将圆绘制好即可

  • 代码

输入图片说明

  • 效果

输入图片说明

  • 点评

此思路白色的圆的阴影绘制位置有问题，与我们要求的不一致

思路2（推荐）

我们同样将其看成两个半径不同的蓝色的圆，不算其重叠部分重新组成的一个封闭路径

看成一个封闭路径的原因：不在路径范围的区域，才能呈现路径区域的投影

  • 代码

输入图片说明

  • 效果

输入图片说明

  • 点评

可以看到实现的效果与我们要求的一样

非零环绕规则

主要用于图形的填充，判断一个区域是否填充：在一个区域中任选一点，然后在我们的区域外也任选一点，让其组成一条射线,具体填充原则，查看其非零环绕规则计数器的值，!0:填充

非零环绕规则计数器

第1步：初始化计数器为0 第2步：设顺时针方向为1，那么逆时针方向就为－1 第3步：根据非零环绕原则引一条射线，计算射线上最终的值，如果为0:不填充，如果!0:填充

输入图片说明

转载于:https://my.oschina.net/cj0072016/blog/646085

weixin_34202952
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas — 非零环绕规则
wupiaopiao_123的专栏
06-24 1237
学习 《HTML5 Canvas 核心技术图形、动画与游戏开发》笔记 二： “非零环绕规则” 实现如下圆环效果： canvas 中可通过 beginPath() 来开始一段新的路径，如果当前路径是循环的，或者包含多个相交的子路径时，当fill()方法被调用时，canvas 绘图环境变量就会判断，应该如何对当前路径进行填充。canvas在填充那种互相有交叉的路径时，使用"非零环绕
【canvas】非零环绕原则
Evan_QB的博客
12-15 528
大家都知道平时画比较规矩的线条时，都可以很明确地给其涂色，例如矩形，圆形等。 那么不规矩的图片呢 ? 当我们使用canvas进行填充颜色时，我们可以使用fill()方法进行填充，那么问题来了，那么它是怎么进行填充颜色的呢？没错，它遵循的原则就是:非零环绕原则。 那么什么是非零环绕原则？ 如图是一用一根线条画出来的颜色，我们画出其路径，我们在其中随意挑选三个点分别向任
canvas绘图原理 非零环绕原则
ITzhongzi的博客
03-07 731
Canvas非零环绕
weixin_40281246的博客
04-19 102
// 获取画布 var c = document.querySelector('canvas'); // 获取绘图对象 var ctx = c.getContext('2d'); // 逆时针绘制 ctx.moveTo(100, 100); ctx.lineTo(100, 300); ctx.lineTo(300, 300); ctx.lineTo(300, 100); ctx.closePat...
Canvas中的非零环绕
aitaiyu2415的博客
11-26 119
先上图 当要填充图形时，必须区分开哪些部分是覆盖的，哪些是空的，根据绘制的方向可以判断出来 非零环绕规则：对于路径中指定范围区域，从该区域内部画一条足够长的线段，使此线段的完全落在路径范围之外。 非零环绕规则计数器：然后，将计数器初始化为0，每当这个线段与路径上的直线或曲线相交时，就改变计数器的值，如果是与路径顺时针相交时，那么计数器就加1， 如果是与路径逆时针相交时，那么计数...
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
01-19
路径方向与非零环绕原则平时我们画的图形都是规规矩矩的，那么如果我们用线条画了个抽象派作品，就像下面这图一样，童鞋们知道怎么用fill()染色呢？ 这里就要用到数学上的一个方法——非零环绕原则，来判断哪块区域...
JavaScript Canvas 非线性移动示例
02-24
本示例将聚焦于“非线性移动”，这是一种在Canvas上实现物体以非匀速或非直线轨迹移动的技术。 非线性移动的概念主要涉及物理学中的运动学，它通常指的是物体沿着曲线路径移动或者速度随时间变化的情况。在Canvas中...
html5 canvas碎片3D环绕地球天体运动动画特效
06-11
在这个特定的案例中，“html5 canvas碎片3D环绕地球天体运动动画特效”是一个利用Canvas API实现的3D视觉效果，模拟了天体（如行星）在三维空间中围绕地球的运动轨迹。 首先，我们要理解Canvas的基本概念。...
HTML5 canvas基本绘图之图形变换
01-21
<canvas></canvas>是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。...
canvas笔记-非零环绕原则及剪纸实例
IT1995的博客
06-03 814
首先提下非零环绕原则，如下图： 这里如上面的图，这个非零环绕和画图的方向有关！ 如+1要染色的地方，在这里找一个点射向外边，如果相交的地方画图方向和射线方向一样就是+1，要染色。 +2那个地方，也是那样。 0为不染色，因为一个+1一个-1，只要不是0就要染色，这就是非零环绕原则。 下面给出两个实例 程序运行截图如下： 源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta cha.
canvas画不规则多边形_详解HTML5 Canvas绘制不规则图形时的非零环绕原则
weixin_39874379的博客
12-19 379
路径方向与非零环绕原则平时我们画的图形都是规规矩矩的，那么如果我们用线条画了个抽象派作品，就像下面这图一样，童鞋们知道怎么用fill()染色呢？这里就要用到数学上的一个方法——非零环绕原则，来判断哪块区域是里面，哪块区域是外面。接下来，我们具体来看下什么是非零环绕原则。首先，我们得给图形确定一条路径，只要“一笔画”并且“不走重复路线”就可以了。如图，标出的是其中的一种路径方向。我们先假定路径的正方...
HTML5学习第17篇——非零环绕
李小白的博客
12-12 415
1、非零环绕原则    非零环绕原则： 　　如果需要判断某一个区域是否需要填充颜色，就从该区域中随机的选取一个点。从这个点拉一条直线出来, 一定要拉到图形的外面. 此时以该点为圆心。看穿过拉出的直线的线段， 如果是顺时针方向就记为 +1, 如果是 逆时针方向，就记为 -1。最终看求和的结果. 如果是 0 就不填充， 如果是非零就填充。 3、非零环绕示例 示例1 代码 &lt;!DOC...
canvas系类-非零坏绕原则（一）
汉堡请不要欺负面条
02-27 752
根据上面的原理，演示画一个环形图的实例 //1.获取canvas上下文， var dom=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var ctx=dom.getContext('2d');//获取canvas上下文的内容 ctx.beginPath(); ctx.
Canvas 填充,非零环绕原则,中空矩形
houyanhua1的专栏
04-10 994
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &am
非零环绕数规则和奇-偶规则（Non-Zero Winding Number Rule&&Odd-even Rule）
热门推荐
freshForIphone的专栏
12-08 1万+
参考 [1]http://www.cs.rit.edu/~icss571/filling/alt_parity.html [2]http://cs.hust.edu.cn/webroot/courses/csgraphics/jiaocai.php?bookpage=5_c_c [3]http://en.wikipedia.org/wiki/Nonzero-rule 在图形学中判断
华为od机试真题 — 代表团坐车(Python)
学习,你不是一个人在战斗 ～ 961302305（QQ,微信）
07-17 575
【华为od机试真题 】代表团坐车(Python) 某组织举行会议，来了多个代表团同时到达，接待处只有一辆汽车可以同时接待多个代表团，为了提高车辆利用率，请帮接待员计算可以坐满车的接待方案输出方案数量。
【Python如何将字符串连接在一起并使用`join()`方法】
最新发布
qq_36253366的博客
07-19 177
方法是字符串对象的方法，而不是列表或元组等序列类型的方法。因此，你需要先指定一个用作分隔符的字符串，然后调用这个字符串的。方法将字符串连接在一起，你需要首先确保这些字符串被存储在一个序列类型中（如列表或元组），然后调用这个序列的。方法是一个字符串方法，它用于将序列（如列表、元组等）中的元素以指定的字符连接生成一个新的字符串。列表中的所有字符串元素使用空格作为分隔符连接成一个新的字符串。方法，并将你想要作为分隔符的字符串作为参数传递给。方法，并将包含要连接字符串的序列作为参数传递。
Python每日一题：回文数
xiongxiaoxuan的博客
07-16 274
回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。例如，121 是回文，而 123 不是。给你一个整数 x ，如果 x 是一个回文整数，返回 true；否则，返回 false。解释：从左向右读, 为 -121。从右向左读, 为 121-。因此它不是一个回文数。先将整数x转化为字符串形式，判断x和它的反转形态是否完全相等。解释：从右向左读, 为 01。需注意：True和False首字母大写！提示：-231
IPython 日志秘籍：%logstate 命令全解析
2401_85812026的博客
07-17 564
logstate命令是 IPython 日志系统的重要组成部分，它帮助我们掌控日志记录的状态。通过本文的介绍，你应该对如何在 IPython 中使用%logstate查看日志状态有了更深入的理解。记住，合理利用日志系统，可以让你的数据探索过程更加透明和可追溯。本文详细介绍了 IPython 的%logstate命令，包括其基本概念、基本用法、输出解析以及实战示例。希望本文能够帮助读者更好地利用 IPython 的日志系统，优化数据探索和科学计算的工作流。记住，掌握%logstate。
canvas清除非矩形路径
06-13
在 Canvas 上清除非矩形路径可以使用 `globalCompositeOperation` 属性和 `clip()` 方法。 首先，我们需要定义一个非矩形路径，比如一个圆形： ```javascript var canvas = document.getElementById('myCanvas'); ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值