tl;dr;版本:文档宣称:新版 Canvas 2D 接口与 Web 一致,会误导人。实际上 ctx.drawImage(image, dx, dy); 这个接口 image 仅支持图片对象(?)。
有疑问的是这个接口 : https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
CanvasContext.drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight)
绘制图像到画布
官方文档在这里指出 https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.html
CanvasContext
canvas 组件的绘图上下文。CanvasContext 是旧版的接口, 新版 Canvas 2D 接口与 Web 一致。
但是MDN文档中显示:https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage
void ctx.drawImage(image, dx, dy);
允许任何的 canvas 图像源(CanvasImageSource),例如:CSSImageValue,HTMLImageElement,SVGImageElement,HTMLVideoElement,HTMLCanvasElement,ImageBitmap 或者OffscreenCanvas。
我尝试在小程序中给第一个参数传入 canvas 对象,在iPhone手机上不能渲染,也没有报错。
场景举例,讲一个canvas中的图片渲染到另外一个canvas上。
// 图片路径集合 var imagePaths = ['image1.png','image2.png','image3.png']; // 图片对象集合 var imageData = [imagePaths.length]; // 渲染之前图片预处理 for (var i = 0; i < imagePaths.length; i++) { var image = canvas.createImage(); image.src = imagePaths[i]; image.onload = function(){}; imageData[i] = imagePaths[i]; context.drawImaeg(imageData[i]); } // 这块代码放渲染的地方 for (var i = 0; i < imageData.length; i++) { context.drawImaeg(imageData[i]); }
https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.createImage.html