微信小程序API繪圖接口（reference）,context方法大全

2017-12-22

導(dǎo)讀：API 接口方法說明 createCanvasContext 創(chuàng)建 canvas 繪圖上下文(指定 canvasId) createContext(不推薦使用) 創(chuàng)建 canvas 繪圖上下文 drawCanvas(不推薦使用) 進(jìn)行繪圖 canvasToTempFilePath 導(dǎo)出圖片 context 對(duì)象...

API 接口

方法	說明
createCanvasContext	創(chuàng)建 canvas 繪圖上下文(指定 canvasId)
createContext(不推薦使用)	創(chuàng)建 canvas 繪圖上下文
drawCanvas(不推薦使用)	進(jìn)行繪圖
canvasToTempFilePath	導(dǎo)出圖片

context 對(duì)象的方法列表

顏色，樣式，陰影

方法	說明
setFillStyle	設(shè)置填充樣式
setStrokeStyle	設(shè)置線條樣式
setShadow	設(shè)置陰影

漸變

方法	說明
createLinearGradient	創(chuàng)建一個(gè)線性漸變
createCircularGradient	創(chuàng)建一個(gè)圓形漸變
addColorStop	在漸變中的某一點(diǎn)添加一個(gè)顏色變化

線條樣式

方法	說明
setLineWidth	設(shè)置線條寬度
setLineCap	設(shè)置線條端點(diǎn)的樣式
setLineJoin	設(shè)置兩線相交處的樣式
setMiterLimit	設(shè)置最大傾斜

矩形

方法	說明
rect	創(chuàng)建一個(gè)矩形
fillRect	填充一個(gè)矩形
strokeRect	畫一個(gè)矩形（不填充）
clearRect	在給定的矩形區(qū)域內(nèi)，清除畫布上的像素

路徑

方法	說明
fill	對(duì)當(dāng)前路徑進(jìn)行填充
stroke	對(duì)當(dāng)前路徑進(jìn)行描邊
beginPath	開始一個(gè)路徑
closePath	關(guān)閉一個(gè)路徑
moveTo	把路徑移動(dòng)到畫布中的指定點(diǎn)，但不創(chuàng)建線條。
lineTo	添加一個(gè)新點(diǎn)，然后在畫布中創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線條。
arc	添加一個(gè)弧形路徑到當(dāng)前路徑，順時(shí)針繪制。
quadraticCurveTo	創(chuàng)建二次方貝塞爾曲線
bezierCurveTo	創(chuàng)建三次方貝塞爾曲線

變形

方法	說明
scale	對(duì)橫縱坐標(biāo)進(jìn)行縮放
rotate	對(duì)坐標(biāo)軸進(jìn)行順時(shí)針旋轉(zhuǎn)
translate	對(duì)坐標(biāo)原點(diǎn)進(jìn)行縮放

文字

方法	說明
fillText	在畫布上繪制被填充的文本
setFontSize	設(shè)置字體大小
setTextBaseline	設(shè)置字體基準(zhǔn)線
setTextAlign	設(shè)置字體對(duì)齊方式

圖片

方法	說明
drawImage	在畫布上繪制圖像

混合

方法	說明
setGlobalAlpha	設(shè)置全局畫筆透明度

其他

方法	說明
save	保存當(dāng)前繪圖上下文
restore	恢復(fù)之前保過的繪圖上下文
draw	進(jìn)行繪圖
getActions(不推薦使用)	獲取當(dāng)前`context`上存儲(chǔ)的繪圖動(dòng)作
clearActions(不推薦使用)	清空當(dāng)前的存儲(chǔ)繪圖動(dòng)作

更多微信小程序開發(fā)教程，可以關(guān)注hi小程序。

第二部分：如何開通一個(gè)小商店

微信小程序API繪圖接口（reference）,context方法大全

API 接口

context 對(duì)象的方法列表

顏色，樣式，陰影

漸變

線條樣式

矩形

路徑

變形

文字

圖片

混合

其他

顏色，樣式，陰影