欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

cocos creator动态生成image并绘制到canvas中

程序员文章站 2022-03-21 14:01:18
...

如果需要将图片绘制到canvas中,则需要创建image对象,然后把本地的图片地址赋值给src,待图片加载成功后,使用drawImage即可

		  const img = new Image();
          img.onload = function () {
           // 安卓性能稍差点的手机,绘制image可能有些延迟,避免分享图片底图为空白,
          // 分享操作放到回调中
          ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 500, 400);
                     Log.I("-------------图片加载成功,绘制到cnavas结束");
          };
          img.onerror = function () {
                  Log.E(`-------------分享背景图图片加载失败path:${res.tempFilePath}`);
           };
         img.src = tempFilePath;

这里需要注意两点:

  1. tempFilePath一定要是相对于项目的根目录的绝对路径,如果是用wx.downloadFile
    下载的图片,则直接使用res.tempFilePath即可,如果是使用savefile保存到本地的图片,则一定
    要以wx.env.USER_DATA_PATH开头的路径
  2. drawImage最好在 img.onload 的回调中,否则部分性能不怎么好的手机,会导致图片绘制失败