截至2022.12.23 修改日

微信小程序開發文檔介紹不全，導致很多用戶繪制圖片不顯示或失敗，因此寫下截至目前的可行方案

<canvas type="2d" id="myCanvas"></canvas>// canvas 標簽中要使用id, 不要只用canvas-id,沒有id,wx.createSelectorQuery().select('#myCanvas') 獲取不到節點 wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }).exec((res) => {let textCanvas = res[0].node; // 重點1textCtx = textCanvas.getContext('2d'); // 重點2/**至此，textCanvas，textCtx已經成功獲取到，下面代碼為繪圖測試代碼可根據自己需要修改**/textCtx.clearRect(0,0,textCanvas.width,textCanvas.height)textCtx.beginPath();const bg = textCanvas.createImage();bg.src = 'https的網絡圖';bg.onload = () => {textCtx.drawImage(bg, 0, 0, textCanvas.width, textCanvas.height)} })

如果新手不熟悉canvas，先看下小程序官方文檔

可運行案例：

wxml:

<canvas type="2d" id="myCanvas" style="width: 750rpx;height: 200rpx;"></canvas>

js:

let textCtx; Page({data: {},onLoad() {wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }).exec((res) => {let textCanvas = res[0].node // 重點1textCtx = textCanvas.getContext('2d') // 重點2/**至此，textCanvas，textCtx已經成功獲取到，下面代碼為繪圖測試代碼可根據自己需要修改**/textCtx.clearRect(0,0,textCanvas.width,textCanvas.height)textCtx.beginPath();const bg = textCanvas.createImage()bg.src = 'https://s1.ax1x.com/2022/06/13/XRfjoR.png'bg.onload = () => {textCtx.drawImage(bg, 0, 0, textCanvas.width, textCanvas.height)}})}})

總結

以上是生活随笔為你收集整理的微信小程序 新版canvas绘制图片方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。