QQ小程序 Canvas畫布

所有在 <canvas> 中的畫圖必須用 JavaScript 完成： QML：（我們在接下來的例子中如無特殊聲明都會用這個 QML 為模板，不再重復(fù)）

<canvas canvas-id="myCanvas" style="border: 1px solid;" />

JS：（我們在接下來的例子中會將 JS 放在 onLoad 中）

const ctx = qq.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 = qq.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()