canvas基礎歸納

2021-10-01 04:10:17 字數 2120 閱讀 8089

beginpath()新建一條路徑,生成之後,圖形繪製命令被指向到路徑上生成路徑。

closepath()閉合路徑之後圖形繪製命令又重新指向到上下文中。

stroke()通過線條來繪製圖形輪廓。

fill()通過填充路徑的內容區域生成實心的圖形。

lineto(x, y)繪製一條從當前位置到指定x以及y位置的直線

arc(x, y, radius, startangle, endangle, anticlockwise)畫乙個以(x,y)為圓心的以radius為半徑的圓弧(圓),從startangle開始到endangle結束,按照anticlockwise給定的方向(預設為順時針)來生成

fillstyle = color設定圖形的填充顏色。

strokestyle = color設定圖形輪廓的顏色。

createlineargradient(x1, y1, x2, y2)createlineargradient 方法接受 4 個引數,表示漸變的起點 (x1,y1) 與終點 (x2,y2)

// 三角

ctx.

beginpath()

;ctx.

moveto(10

,10);

ctx.

lineto(50

,10);

ctx.

lineto(50

,50);

ctx.

lineto(10

,10);

ctx.strokestyle =

'#b18ea6'

;ctx.linewidth =2;

ctx.

stroke()

;ctx.

closepath()

;// 矩形

ctx.fillstyle =

"#00f"

;ctx.

fillrect(70

,10,40

,40);

// 扇形

ctx.

beginpath()

;ctx.

moveto

(130,10

);ctx.

arc(

130,10,

40, math.pi/

4, math.pi/

2,false);

let grd = ctx.

createlineargradient

(130,10

,150,50

);grd.

addcolorstop(0

,'#f00');

grd.

addcolorstop(1

,'#0ff');

ctx.fillstyle = grd;

ctx.

fill()

;ctx.

closepath()

;filltext(text, x, y [, maxwidth])在指定的(x,y)位置填充指定的文字,繪製的最大寬度是可選的.

stroketext(text, x, y [, maxwidth])在指定的(x,y)位置繪製文字邊框,繪製的最大寬度是可選的.

Canvas繪製基礎

繪製畫素點 canvas.drawpoint float x,float y,paint paint canvas.drawpoints float pts,paint paint canvas.drawpoints f float pts,int offset,int count,paint pa...

canvas基礎 矩形

上回我們了解了線條,由線 面,今天我們來說 矩形 畫矩形之前呢,我們先思考如何才能畫乙個矩形?很簡單,就是四條線段湊到一起,圍成乙個面,那麼我們在寫的時候是不是真的要畫四條直線呢?當然不要 確定初始位置,改變終點位置,三次就好。備註 一下我們畫圖形,都是按照順時針畫的喲。還是按照我們之前學畫直線的方...

Python 基礎歸納整理

可以單獨定義變數 a 62 b 48可以多個變數賦值 a b 123 a,b,c 1,2,3 a,b b,a可以單行注釋 這排是一行注釋 這排又是一行注釋 a 62 這是注釋 b 48也可以多行注釋 這幾排 都是注釋 這也是多排注釋 這也是多排注釋 這也是多排注釋 python 沒有begin en...