先上图

当要填充图形时,必须区分开哪些部分是覆盖的,哪些是空的,根据绘制的方向可以判断出来

非零环绕规则:对于路径中指定范围区域,从该区域内部画一条足够长的线段,使此线段的完全落在路径范围之外。

非零环绕规则计数器:
然后,将计数器初始化为0,每当这个线段与路径上的直线或曲线相交时,就改变计数器的值,如果是与路径顺时针相交时,那么计数器就加1, 如果是与路径逆时针相交时,那么计数器就减1.
如果计数器始终不为0,那么此区域就在路径范围里面,在调用fill()方法时,浏览器就会对其进行填充。如果最终值是0,那么此区域就不在路径范围内,浏览器就不会对其进行填充。

如图
线段1:根据非零环绕规则,这条直线只经过路径一次且路径是逆时针方向,那么计数器为-1;

根据浏览器对计数器的计算原理得出,当调用fill()方法时浏览器会填充此区域。

线段2:根据非零环绕规则,这条直线经过路径二次且路径都是逆时针方向,那么计数器为-2;

根据浏览器对计数器的计算原理得出,当调用fill()方法时浏览器会填充此区域。

线段3:根据非零环绕规则,这条直线经过路径二次;第一次经过的路径是逆时针方向,计数器则为-1;

第二次经过的路径是顺时针方向,计数器为1;原因计数器的最终值为0-1+1 = 0;

所以根据浏览器对计数器的计算原理得出,当调用fill()方法时浏览器不会填充此区域。

Canvas中的非零环绕的更多相关文章

  1. canvas中的非零环绕原则

    非零环绕原则: 如果需要判断某一个区域是否需要填充颜色. 就从该区域中随机的选取一个点. 从这个点拉一条直线出来, 一定要拉到图形的外面. 此时以该点为圆心.看穿过拉出的直线的线段. 如果是顺时针方向 ...

  2. Canvas中的非零围绕规则原理

    非零围绕规则:对于路径中指定范围区域,从该区域内部画一条足够长的线段.使此线段的全然落在路径范围之外. 非零围绕规则计数器:然后,将计数器初始化为0,每当这个线段与路径上的直线或曲线相交时,就改变计数 ...

  3. canvas填充规则,非零环绕

    1.看一块区域是否填充 2.从这个区域拉一条直线 3,看和这条直线相交的轨迹 4.如果顺时针轨迹+1 5.如果逆时针轨迹-1 6.所有轨迹的值计算出来 7.如果是非0,那么填充 8.如果是0那么不填充

  4. python 判断矩阵中每行非零个数的方法

    python 判断矩阵中每行非零个数的方法: # -*- coding: utf-8 -*- # @Time : 2018/5/17 15:05 # @Author : Sizer # @Site : ...

  5. 讲解Canvas中的一些重要方法

    Canvas所提供的各种方法根据功能来看大致可以分为几类: 第一是以drawXXX为主的绘制方法: 第二是以clipXXX为主的裁剪方法: 第三是以scale.skew.translate和rotat ...

  6. Keil MDK下如何设置非零初始化变量

    一些工控产品,当系统复位后(非上电复位),可能要求保持住复位前RAM中的数据,用来快速恢复现场,或者不至于因瞬间复位而重启现场设备.而keil mdk在默认情况下,任何形式的复位都会将RAM区的非初始 ...

  7. Keil MDK下如何设置非零初始化变量(转)

    源:Keil MDK下如何设置非零初始化变量 一些工控产品,当系统复位后(非上电复位),可能要求保持住复位前RAM中的数据,用来快速恢复现场,或者不至于因瞬间复位而重启现场设备.而keil mdk在默 ...

  8. canvas中插入的图片 自适应 ?

    注意 不是用canvas画图 是在canvas中插入图片 我很是惊讶  为啥明明img标签就能解决的非要用canvas 不过别人写好的 我一般不会动 需求是 canvas中的图片自适应不能拉伸…… 老 ...

  9. WPF在Canvas中绘图实现折线统计图

    最近在WPF中做一个需要实现统计的功能,其中需要用到统计图,之前也没有接触过,度娘上大多都是各种收费或者免费的第三方控件,不想用第三方控件那就自己画一个吧. 在园子还找到一篇文章,思路来自这篇文章,文 ...

随机推荐

  1. 3-4 计算属性的setter和getter

    Vue中的计算属性的setter和getter //如上,fullName这个方法在取这个数据的时候,会执行get中的方法:而在设置数据时,会执行set中的方法.其中set中有个参数(value),用 ...

  2. spark使用udf给dataFrame新增列

    在 spark 中给 dataframe 增加一列的方法一般使用 withColumn // 新建一个dataFrame val sparkconf = new SparkConf() .setMas ...

  3. 实现网站页面的QQ临时会话,分享到空间微博等按钮.

    一 qq临时会话 要实现qq临时会话首先要到qq在线状态官网开通qq在线状态,其中临时对话也分为加密和未加密. 1.1:加密模式 <a target="_blank" hre ...

  4. Java生成全局唯一ID代码演示

    看了GitHub上的两个生成唯一ID的算法程序(一个出自百度,一个出自美团),打算运行着试试看,至于原理什么的文档上讲得很详细了,此处不再一一粘贴了,此处只演示代码 https://github.co ...

  5. Solr 11 - Solr集群模式的部署(基于Solr 4.10.4搭建SolrCloud)

    目录 1 SolrCloud结构说明 2 环境的安装 2.1 环境说明 2.2 部署并启动ZooKeeper集群 2.3 部署Solr单机服务 2.4 添加Solr的索引库 3 部署Solr集群服务( ...

  6. 【ASP.NET Core快速入门】(九) RoutingMiddleware介绍以及MVC引入

    前言 前面我们介绍了使用app.Map来配置路由,但是对于一般不是特别大的项目来说,我们不使用Map来进行路由配置. 配置路由 我们首先需要在Startup.cs文件中的ConfigureServic ...

  7. GAN模型生成手写字

    概述:在前期的文章中,我们用TensorFlow完成了对手写数字的识别,得到了94.09%的识别准确度,效果还算不错.在这篇文章中,笔者将带领大家用GAN模型,生成我们想要的手写数字. GAN简介 对 ...

  8. 关于HTML相关知识随记

    HTML是构成网页文档的主要语言,它由HTML标签和字符信息组成.HTML标签可以标识文字.图形.动画.声音.表格.超链接等网页对象,字符信息用以传达网页内容,如标题.段落文本.图像等. HTML4文 ...

  9. VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——GifView控件的使用方式

    一.          样式一 我们要实现上图中的效果,需要如下的操作: 从工具栏上的“Smobiler Components”拖动一个GifView控件到窗体界面上 修改GifView的属性 Aut ...

  10. Docker搭建MongoDB

    1. Docker搭建Mongodb 1.1 获取docker镜像 docker pull mongo 1.2 创建mongodb容器 docker run --name my-mongo -p 27 ...