收藏
回答

CanvasContext.drawImage是不是只支持传入图片对象?

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上。

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

2 个回答

  • 咖啡
    咖啡
    2021-01-08
    // 图片路径集合
    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]);
    }
    
    


    2021-01-08
    有用
    回复
  • 👀
    👀
    2020-04-03

    https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.createImage.html

    2020-04-03
    有用
    回复 4
    • 加肥猫
      加肥猫
      2020-04-03
      哥,谢谢你贴链接啊,辛苦了,我看了,里面没有解释drawImage接口与Web接口的异同。
      2020-04-03
      回复
    • 👀
      👀
      2020-04-03回复加肥猫
      2d的方法是要用这个api创建img对象,然后赋值src,再绘制
      2020-04-03
      回复
    • 加肥猫
      加肥猫
      2020-04-03回复👀
      也就是说,只能用图片对象,不能用其他类型的参数对吗?
      2020-04-03
      回复
    • 👀
      👀
      2020-04-03回复加肥猫
      是的
      2020-04-03
      1
      回复
登录 后发表内容
问题标签