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

原创于 2019-11-26 11:01:07 发布 · 3.6k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了在微信小游戏中如何正确地将图片绘制到canvas上，包括创建image对象，使用drawImage方法，以及确保图片加载完成后再进行绘制的技巧。特别强调了tempFilePath的正确使用方法，以避免在性能较差的手机上出现图片绘制失败的问题。

微信小游戏开发中，如果需要将图片绘制到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;

这里需要注意两点：

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

标签