Canvas的fill 填充規則

2021-08-25 05:15:14 字數 799 閱讀 6607

在canvas中使用fill()進行填充,遵循非零環繞填充規則。

非零環繞填充規則:如果想知道某一區域是否被填充,就從這一區域畫一條直線向外,在與其他線的交點處,如果其他線是順時針方向畫的,就+1,逆時針則-1,如果最後總和為0,則不會填充,非零則填充。

例如:假設有兩個長方形,外面大的長方形是順時針反方向畫的,裡面的小長方形是逆時針方向畫的。

var mycanvas = document.queryselector("canvas");

var ctx = mycanvas.getcontext("2d");

// 大長方形,順時針

ctx.moveto(100,100);

ctx.lineto(400,100);

ctx.lineto(400,300);

ctx.lineto(100,300);

ctx.closepath();

// 小長方形,逆時針

ctx.moveto(150,150);

ctx.lineto(150,250);

ctx.lineto(350,250);

ctx.lineto(350,150);

ctx.closepath();

ctx.fill();

效果圖如下:

fill填充函式解析及用法示例

fill x,y,color 其中x,y是填充的範圍,color是填充的顏色。1 對x,y範圍的獲取,示例 所以可以得出x 0,1,1,0 y 0,0,1,1 示例 如下 畫乙個填充圖形 思路 首先需要得到填充圖形的x y 範圍,然後再填充圖形 clear clc close all x 0,1,1...

fill和memset 陣列填充跟陣列初始化

原型 void memset void s,int ch,size t n 功能是 將s所指向的某一塊記憶體中的前n個 位元組的內容全部設定為ch指定的ascii值,第乙個值為指定的記憶體位址,塊的大小由第三個引數指定,這個函式通常為新申請的記憶體做初始化工作,其返回值為指向s的指標。注意 這邊是對...

Canvas 描邊與填充

strokerect 填充fill canvas中常用的stroke方法就是描邊方法,它用以描繪輪廓。顧名思義,strokestyle即用以描述描邊的樣式,簡單地說就是邊的顏色。const mycanvas document.getelementbyid mycanvas const ctx myc...