微信小程式API 繪圖介紹（如何在Canvas上繪製圖片）


在Canvas上畫圖

所有在<canvas/> 中的畫圖必須用JavaScript 完成：

WXML：（我們在接下來的例子中如無特殊宣告都會用這個WXML 為模板，不再重複）

<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()

第一步：建立一個Canvas 繪圖上下文

首先，我們需要建立一個Canvas 繪圖上下文CanvasContext。

CanvasContext 是小程式內建的一個對象，有一些繪圖的方法：

const ctx = wx.createCanvasContext('myCanvas')

第二步：使用Canvas 繪圖上下文進行繪圖描述

接著，我們來描述要在Canvas 中繪製什麼內容。

設定繪圖上下文的填滿色為紅色：

ctx.setFillStyle('red')

用fillRect(x, y, width, height) 方法畫一個矩形，填滿剛剛設定的紅色：

ctx.fillRect(10, 10, 150, 75)

第三步：畫圖

告訴<canvas/> 元件你要將剛剛的描述繪製上去：

ctx.draw()

結果：

201612241053373520.png