Canvas5 虛線和漸變

2021-09-22 12:57:13 字數 1190 閱讀 1020

虛線的設定包含乙個setlinedash的方法，乙個linedashoffset的屬性。

ctx.setlinedash([4,16])


ctx.beginpath()


ctx.moveto(64,100)


ctx.lineto(128,100)


ctx.stroke()
ctx.setlinedash([8,16])

ctx.setlinedash([16,2,2,2])

linedashoffset = 0

linedashoffset = 4

linedashoffset = -4

createlineargradient(x1，y1，x2，y2)設定漸變的起點和終點,線性漸變。

範例：

function draw() 


draw();
createredialgradient(x1,y1,r1,x2,y2,r2)，定義以x1，y1為原點，r1為半徑的圓，以及x2，y2為原點，r2為半徑的圓。（也就是從圓心向外漸變），這裡需要注意乙個問題，r1半徑的圓要包含於r2半徑的圓內，如果只有部分重疊的，會有不可預期的結果。

function draw() 


draw();
將img或者是canvas物件以貼圖的形式儲存，重複利用。這個api是createpattern（img，type）

範例：

function draw() 


}draw();
canvas 和　svg 中都是採用下列兩種方式

evenodd

對於 nonzero 而言，要判定乙個區域是在路徑內還是路徑外的方式簡單來說，就是平面上任意乙個點，以這個點為七點發射一條無限長的射線，觀察該線於路徑相交後的方向是順時針還是逆時針。逆時針為-1，順時針為+1，加總之後，如果結果為0就表示在外部，如果不是0就是內部。（這個想法就可以用來判定點是否在圖形的內部）直接上圖：

對於奇偶原則而言，所需要考慮的就是，在路徑包圍的區域中，隨便找乙個點，向外發射射線，計算與它相交線的個數，如果為奇數就填充，如果為偶數就不填充。同樣可以參考一下下面的範例：

Html5 Canvas 繪製虛線和實線的切換方法

場景應用 1 最開始預設繪製的都是實線。var canvas document.getelementbyid canvas var context canvas.getcontext 2d context.strokestyle black context.linewidth 5 context.l...

canvas中的線性漸變和徑向漸變

var b a.getcontext 2d var grd b.createradialgradient 75,50,5,90,60,100 徑向漸變，引數值引數 描述 x0 漸變開始點的 x 座標 y0 漸變開始點的 y 座標 x1 漸變結束點的 x 座標 y1 漸變結束點的 y 座標 同上 ad...

css 5 背景和漸變

背景色 background color transparent 設定透明 背景background image eg background image url img head2.png background size 100px 200px 背景圖大小，少用，失真 background repe...