canvas非零繞組規則與奇偶規則
大家知道canvas種使用fill()方法可以填充路徑。
其實這個填充也是有規則的,具體語法結構如下:
[JavaScript] 純文字檢視 複製程式碼ctx.fill(); ctx.fill(fillRule); ctx.fill(path, fillRule);
關於path引數這裡我們們先不介紹,具體可以參閱canvas Path2D物件一章節。
fillRule引數就是用來規定填充規則的,可被允許的值如下:
(1)."nonzero": 非零環繞規則, 預設的規則。
(2)."evenodd": 奇偶環繞規則。
下面就對這個規則做一下介紹:
假設從內部做一條指向無窮遠的射線(當然這個線會穿透所有的曲線)。
下面就分別針對兩個規則作介紹:
(1).對於奇偶規則:曲線和射線有兩個交點(或交點個數為偶數),按照奇偶規則,此點在路徑之外,那麼呼叫fill()方法時不會填充,反之就會進行填充。
(2).對於非零規則:將計數器初始化為0,每當這個線段與路徑上的直線或曲線相交時,就改變計數器的值,如果是與路徑順時針相交時,那麼計數器就加1, 如果是與路徑逆時針相交時,那麼計數器就減1,如果計數器始終不為0,那麼此區域就在路徑範圍裡面,在呼叫fill()方法時,就會對其進行填充。如果最終值是0,那麼此區域就不在路徑範圍內,不會對其進行填充。
掌握了上面的理論,那麼對canvas繪製立體圓環程式碼例項一章節中,為什麼只填充一個圓環就可以理解了。
相關文章
- Canvas中的非零環繞規則原理Canvas
- iOS Winding Rules 纏繞規則iOS
- aws IP 聲譽規則組
- Mysql-基本的規則與規範MySql
- 【java規則引擎】之規則引擎解釋Java
- 正則匹配規則2
- IT職場規則
- url規則
- MapReduce--Input與Output規則
- 管理規則和基於規則的轉換——流
- 任務規則
- git提交規則Git
- ESlint規則EsLint
- css規則整理CSS
- CSS命名規則CSS
- 1、基本規則
- firewalld:direct規則
- 專案組織規劃的原則(轉)
- 【java規則引擎】規則引擎RuleBase中利用觀察者模式Java模式
- 【java規則引擎】java規則引擎搭建開發環境Java開發環境
- 配置ModSecurity防火牆與OWASP規則防火牆
- Nginx的Rewrite規則與例項Nginx
- 【java規則引擎】簡單規則的rete網路示意圖Java
- canvas 實現光線沿不規則路徑運動Canvas
- 規則引擎與機器學習比較與結合機器學習
- nginx location匹配規則Nginx
- Laravel 自定義規則Laravel
- htmlhint 規則詳解HTML
- CSS規則物件概述CSS物件
- SCSS 巢狀規則CSS巢狀
- Nginx 跳轉規則Nginx
- iptables防火牆規則防火牆
- SQLServer CDC清理規則SQLServer
- ModSecurity 自建規則之路
- 規則引擎模式 - upperdine模式
- oracle undo分配規則Oracle
- JavaScript this 繫結規則JavaScript
- SQL Server排序規則SQLServer排序