小程序canvas 绘制图片显示问题,模拟器与手机端问题各种各样?
wx.createSelectorQuery().select('#myCanvas')
.fields({
node: true, // canvas 实例
size: true // 节点宽高
})
.exec((res) => {
let canvas = res[0].node
let ctx = canvas.getContext('2d')
let width = res[0].node.width
let height = res[0].node.height
/* self.setData({
canvas,
ctx,
width: res[0].node.width,
height: res[0].height
}) */
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
const url = baseURL + self.data.detail.coverUrl
ctx.save()
// 绘制白色背景
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, width, height)
// 绘制图片
ctx.restore()
const img = canvas.createImage()
img.src = url
img.onload = () => {
ctx.drawImage(img, 0, 16, width, 203)
}
ctx.restore()
const img1 = canvas.createImage()
img1.src = 'https://www.deejv.com/unite/upload/2020330/1585556759866198243366.png'
img1.onload = () => {
ctx.drawImage(img, 8, 231, 66, 22)
}
// 绘制文本
ctx.font = "10px";
ctx.fillText("hello world", 40, 231);
})
首先,url路径正常,canvas画布获取正常,但是模拟器只能看见绘制的一个图片,华为手机扫描直接预览是白屏,只有iphoneX 正常显示??
[图片] 绘制了两张图片一些文字,只有ios预览正常显示??? 所有平台、机器真机调试都会报错? 无法获取到html Canvas?