收藏
回答

小程序canvas 绘制图片显示问题,模拟器与手机端问题各种各样?

wx.createSelectorQuery().select('#myCanvas')
                .fields({
                    nodetrue// canvas 实例
                    sizetrue // 节点宽高
                })
                .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(00, width, height)
                    // 绘制图片
                    ctx.restore()
                    const img = canvas.createImage()
                    img.src = url
                    img.onload = () => {
                        ctx.drawImage(img, 016, width, 203)
                    }
                    ctx.restore()
                    const img1 = canvas.createImage()
                    img1.src = 'https://www.deejv.com/unite/upload/2020330/1585556759866198243366.png'
                    img1.onload = () => {
                        ctx.drawImage(img, 82316622)
                    }
                    // 绘制文本
                    ctx.font = "10px";
                    ctx.fillText("hello world"40231);


                })
  首先,url路径正常,canvas画布获取正常,但是模拟器只能看见绘制的一个图片,华为手机扫描直接预览是白屏,只有iphoneX 正常显示??




绘制了两张图片一些文字,只有ios预览正常显示???

所有平台、机器真机调试都会报错?

无法获取到html Canvas?


回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容
问题标签