新canvas接口的drawImage方法怎么用?
发布于 6 年前 作者 kliao 5522 次浏览 来自 问答

目前知道新canvas获取的context是canvasRendertingContext2D,其drawImage方法要求传入一个HTML的img节点,所以直接传入url会报错,查询文档后发现canvas.createImage()可以创建图片对象,实测也确实打印出了<img>,但是给创建好的img添加src后传入drawImage()中没有反应,也不报错,就是啥都不显示,不知道是怎么回事,往大佬指点。代码如下:

/*----------wxml-------------*/

<canvas id=“sharePic” type=“2d”></canvas>

/*-----------js--------------*/

onLoad: async function (options) {

    //将图片的fileID换成真实url

   var result = await wx.cloud.getTempFileURL({

      fileList:[options.url]

      })

      console.log(result);

    var url = result.fileList[0].tempFileURL;

    //选择画布

    var query = wx.createSelectorQuery();

    query.select(’#sharePic’).node().exec(res=>{

    console.log(res);

      var shareCanvas = res[0].node;

      var ctx = shareCanvas.getContext(‘2d’);

      //创建图片对象

      var img = shareCanvas.createImage();

      img.src = url;

      console.log(img)

      //画图,但是没反应

      ctx.drawImage(img,25,10,300,300); 

    }); 

  },

1 回复
img.onload = function () {
  ctx.draw
}
回到顶部