Canvas中的非零环绕
先上图
当要填充图形时,必须区分开哪些部分是覆盖的,哪些是空的,根据绘制的方向可以判断出来
非零环绕规则:对于路径中指定范围区域,从该区域内部画一条足够长的线段,使此线段的完全落在路径范围之外。
非零环绕规则计数器:
然后,将计数器初始化为0,每当这个线段与路径上的直线或曲线相交时,就改变计数器的值,如果是与路径顺时针相交时,那么计数器就加1, 如果是与路径逆时针相交时,那么计数器就减1.
如果计数器始终不为0,那么此区域就在路径范围里面,在调用fill()方法时,浏览器就会对其进行填充。如果最终值是0,那么此区域就不在路径范围内,浏览器就不会对其进行填充。
如图
线段1:根据非零环绕规则,这条直线只经过路径一次且路径是逆时针方向,那么计数器为-1;
根据浏览器对计数器的计算原理得出,当调用fill()方法时浏览器会填充此区域。
线段2:根据非零环绕规则,这条直线经过路径二次且路径都是逆时针方向,那么计数器为-2;
根据浏览器对计数器的计算原理得出,当调用fill()方法时浏览器会填充此区域。
线段3:根据非零环绕规则,这条直线经过路径二次;第一次经过的路径是逆时针方向,计数器则为-1;
第二次经过的路径是顺时针方向,计数器为1;原因计数器的最终值为0-1+1 = 0;
所以根据浏览器对计数器的计算原理得出,当调用fill()方法时浏览器不会填充此区域。
Canvas中的非零环绕的更多相关文章
- canvas中的非零环绕原则
非零环绕原则: 如果需要判断某一个区域是否需要填充颜色. 就从该区域中随机的选取一个点. 从这个点拉一条直线出来, 一定要拉到图形的外面. 此时以该点为圆心.看穿过拉出的直线的线段. 如果是顺时针方向 ...
- Canvas中的非零围绕规则原理
非零围绕规则:对于路径中指定范围区域,从该区域内部画一条足够长的线段.使此线段的全然落在路径范围之外. 非零围绕规则计数器:然后,将计数器初始化为0,每当这个线段与路径上的直线或曲线相交时,就改变计数 ...
- canvas填充规则,非零环绕
1.看一块区域是否填充 2.从这个区域拉一条直线 3,看和这条直线相交的轨迹 4.如果顺时针轨迹+1 5.如果逆时针轨迹-1 6.所有轨迹的值计算出来 7.如果是非0,那么填充 8.如果是0那么不填充
- python 判断矩阵中每行非零个数的方法
python 判断矩阵中每行非零个数的方法: # -*- coding: utf-8 -*- # @Time : 2018/5/17 15:05 # @Author : Sizer # @Site : ...
- 讲解Canvas中的一些重要方法
Canvas所提供的各种方法根据功能来看大致可以分为几类: 第一是以drawXXX为主的绘制方法: 第二是以clipXXX为主的裁剪方法: 第三是以scale.skew.translate和rotat ...
- Keil MDK下如何设置非零初始化变量
一些工控产品,当系统复位后(非上电复位),可能要求保持住复位前RAM中的数据,用来快速恢复现场,或者不至于因瞬间复位而重启现场设备.而keil mdk在默认情况下,任何形式的复位都会将RAM区的非初始 ...
- Keil MDK下如何设置非零初始化变量(转)
源:Keil MDK下如何设置非零初始化变量 一些工控产品,当系统复位后(非上电复位),可能要求保持住复位前RAM中的数据,用来快速恢复现场,或者不至于因瞬间复位而重启现场设备.而keil mdk在默 ...
- canvas中插入的图片 自适应 ?
注意 不是用canvas画图 是在canvas中插入图片 我很是惊讶 为啥明明img标签就能解决的非要用canvas 不过别人写好的 我一般不会动 需求是 canvas中的图片自适应不能拉伸…… 老 ...
- WPF在Canvas中绘图实现折线统计图
最近在WPF中做一个需要实现统计的功能,其中需要用到统计图,之前也没有接触过,度娘上大多都是各种收费或者免费的第三方控件,不想用第三方控件那就自己画一个吧. 在园子还找到一篇文章,思路来自这篇文章,文 ...
随机推荐
- VMware虚拟机安装Linux系统
许多新手连 Windows 的安装都不太熟悉,更别提 Linux 的安装了:即使安装成功了,也有可能破坏现有的 Windows 系统,比如导致硬盘数据丢失.Windows 无法开机等.所以一直以来,安 ...
- 使用vue-cli搭建vue项目
1.安装node环境,然后在命令行输入node -v 和npm -v 查看版本号 2.在正式开始项目之前我们先介绍一下vue-cli,vue-cli是一个脚手架工具,vue-cli是帮助我们写好vue ...
- 8.Django缓存和信号
缓存 由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将某个views的返回值保存至内存或者memcache中, ...
- C#版[击败98.85%的提交] - Leetcode717. 1比特与2比特字符 - 题解
版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...
- 【朝花夕拾】Lint使用篇
工作中Lint工具使用实录及整理 AndroidStudio内置的Lint工具,对app中的代码规范带来了极大的方便.对内存泄漏.代码冗余.代码安全.国际化.代码规范等很多方面都能检测,是 ...
- Solr 01 - 什么是Solr + Solr安装包目录结构说明
目录 1 Solr概述 1.1 Solr是什么 1.2 Solr与Lucene的区别 2 Solr文件说明 2.1 Solr的目录结构 2.2 其他常用概念说明 2.3 创建基础文件目录 2.4 so ...
- Docker Compose 之进阶篇
笔者在前文<Docker Compose 简介>和<Dcoker Compose 原理>两篇文章中分别介绍了 docker compose 的基本概念以及实现原理.本文我们将继 ...
- Jenkins持续集成01—Jenkins服务搭建和部署
一.介绍Jenkins 1.Jenkins概念 Jenkins是一个功能强大的应用程序,允许持续集成和持续交付项目,无论用的是什么平台.这是一个免费的源代码,可以处理任何类型的构建或持续集成.集成Je ...
- [十五]java.math包简介,RoundingMode与MathContext
java.math包提供了java中的数学类 包括基本的浮点库.复杂运算以及任意精度的数据运算 '可以看得到,主要包括三个类一个枚举 BigDecimal和BigInteger接下来会详细介绍 先 ...
- 痞子衡嵌入式:飞思卡尔i.MX RT系列MCU特性介绍(3)- 命名规则
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RT系列MCU的命名规则. 打开任何一款i.MX RT系列芯片的Data Sheet均可找到如下命名规则表,以i.MX ...