收藏
回答

canvas的drawImage的问题,ctx使用canvas.getContext就报错?

第一种情况

//wxml

//js
const query = wx.createSelectorQuery()
      query.select('#mask')
        .fields({ node: true, size: true })
        .exec((res) => {
          const canvas = res[0].node
          const ctx = canvas.getContext('2d')
          wx.getImageInfo({
            src: 'xxx',//合法域名
            success (res) {
              //单独执行这两句报错
              ctx.drawImage(res.path,0,0)
              ctx.draw()
              //单独执行这三句正常
              ctx.setFillStyle('#50d2a6')
              ctx.fillRect(0,0,100,100)
              ctx.draw()
            }
          })
        }) 

报错信息

Failed to execute drawImage on CanvasRenderingContext2D: The provided value is not of type (CSSImageValue or HT
MLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)


第二种情况

//wxml

//js
const ctx = wx.createCanvasContext('mask', this)
wx.getImageInfo({
  src: 'xxx',//合法域名
  success (res) {
    //这单独执行两句不显示
    ctx.drawImage(res.path,0,0)
    ctx.draw()
    //单独执行这三句也不显示
    ctx.setFillStyle('#50d2a6')
    ctx.fillRect(0,0,100,100)
    ctx.draw()
  }
})


另外drawImage()参数我dx,dy,dw,dh都传了试过,结果一样

最后一次编辑于  11-03
回答关注问题邀请回答
收藏

2 个回答

  • 👀
    👀
    11-03

    2d绘制图片必须先用canvas.createImage加载图片后再绘制

    11-03
    有用 1
    回复 1
    • 。
      发表于移动端
      11-03
      谢谢大哥,我刚看到另一篇有人回答了这个,已解决。我就纳闷了,我都已经在文档里住下来了,愣是没找到对应的写法,还是靠大家的回答才解决的。😂
      11-03
      回复
  • 。
    11-03

    问题已经解决,还是贴出来吧,毕竟在文档里没找到完整的说明和写法。

    const query = wx.createSelectorQuery()
          query.select('#canvas')
            .fields({ node: true, size: true })
            .exec((res) => {
              const canvas = res[0].node
              const ctx = canvas.getContext('2d')
              wx.getImageInfo({
                src: 'xxx',//合法域名
                success (res) {
                  //js写法var image = new Image()会报错
                  //小程序api不支持js的Image构造方法
                  const image = canvas.createImage()
                  image.src = res.path
                  ctx.drawImage(image,0,0)
                }
              })
            }) 
    


    11-03
    有用
    回复
登录 后发表内容
问题标签