<canvas?id="myCanvas"?type="2d"?/>在wxml頁面寫id，canvas-id已經(jīng)沒用了。然后像html一樣，使用js獲取這個(gè)canvas標(biāo)簽組件，在微信的js獲取使用wx自帶的方法。如下?文章來源地址http://www.zghlxwxcb.cn/news/detail-504188.html
wx.createSelectorQuery().select('#myCanvas').fields({?node:?true,?size:?true?}).exec((cres)?=>?{
? ? ? //在這里可以下獲取到canvas組件了，然后創(chuàng)建成畫板畫布。
? ? ? ? var?rect?=?cres[0]
?????????console.log(rect)
?????????var?textCanvas?=?rect.node??//?重點(diǎn)1
?????????var?ctx?=?textCanvas.getContext('2d')??//?重點(diǎn)2//創(chuàng)建畫布
? ? ? ? ?//這里踩坑1，我直接繪制，發(fā)現(xiàn)繪制的寬高和獲取到的寬高總有出入，明明打印canvas的寬高和我設(shè)置的寬高一樣，但是繪制在頁面填充顏色，發(fā)現(xiàn)寬度小了很多。
? ? ? ? //?后面經(jīng)過查了大量文獻(xiàn)，發(fā)現(xiàn)原來需要根據(jù)手機(jī)的像素同比1：1化，代碼如下
? ? ? ??const?dpr?=?wx.getSystemInfoSync().pixelRatio
?????????textCanvas.width?=?rect.width?*?dpr
?????????textCanvas.height?=?rect.height?*?dpr
?????????ctx.scale(dpr,?dpr)
? ? ? ? ?//然后下面就跟我們在html繪制一樣，比如繪制文字
? ? ? ? ?ctx.font?=?`bold 18px?serif`
?????????ctx.fillStyle?=?"#ff6800"
?????????ctx.fillText("文字"，10，10)
? ? ? ? ?//接下來是繪制圖片了，這里踩坑2
? ? ? ? ?//1.踩坑2，繪制圖片需要把圖片變成畫布再繪制，
? ? ? ? this.getImage("/assets/logo.png").then(image=>{
? ? ? ? ? ? ? ?ctx.drawImage(image,?10,?20, 38, 38)
? ? ? ? })
})
//?獲取圖片對象
??async?getImage?(url,width,?height)?{??
????const?off?=?wx.createOffscreenCanvas({type:'2d'})
????const?image?=?off.createImage()???
????await?new?Promise((resolve,?reject)=>{??????
??????image.onload?=?resolve??//?繪制圖片邏輯
??????image.src?=?url
????})
????return?image
??},文章來源：http://www.zghlxwxcb.cn/news/detail-504188.html
到了這里，關(guān)于微信小程序wx.createCanvasContext廢棄，使用wx.createOffscreenCanvas接口的繪制canvas 2d海報(bào)遇到的踩坑經(jīng)驗(yàn)。的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
