Documentation de développement de l'applet WeChat
/ 微信小程序API 繪圖介紹(如何在Canvas上畫圖)
微信小程序API 繪圖介紹(如何在Canvas上畫圖)
在Canvas上畫圖
所有在 <canvas/>
中的畫圖必須用 JavaScript 完成:
WXML:(我們在接下來的例子中如無特殊聲明都會用這個 WXML 為模板,不再重復(fù))
<canvas canvas-id="myCanvas" style="border: 1px solid;"/>
JS:(我們在接下來的例子中會將 JS 放在 onLoad 中)
const ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('red') ctx.fillRect(10, 10, 150, 75) ctx.draw()
第一步:創(chuàng)建一個 Canvas 繪圖上下文
首先,我們需要創(chuàng)建一個 Canvas 繪圖上下文 CanvasContext。
CanvasContext 是小程序內(nèi)建的一個對象,有一些繪圖的方法:
const ctx = wx.createCanvasContext('myCanvas')
第二步:使用 Canvas 繪圖上下文進(jìn)行繪圖描述
接著,我們來描述要在 Canvas 中繪制什么內(nèi)容。
設(shè)置繪圖上下文的填充色為紅色:
ctx.setFillStyle('red')
用 fillRect(x, y, width, height)
方法畫一個矩形,填充為剛剛設(shè)置的紅色:
ctx.fillRect(10, 10, 150, 75)
第三步:畫圖
告訴 <canvas/>
組件你要將剛剛的描述繪制上去:
ctx.draw()