我试着用帆布做到这一点。能做到吗？

Question

我尝试使用以下代码

在画布中绘制div

var DivCanvas=function(){
        this.div=document.createElement("div");
        this.posX=1;
        this.posY=1;
        this.width=1;
        this.height=1;
        this.dibujar=function(){
            bufferContexto.drawImage(this.div,this.posX,this.posY,this.width,this.height);
            contexto.drawImage(buffer,0,0);
        };
        this.getDiv=function(){
            return this.div;
        };
/*....*/
        this.setDiv=function(divAux){
            this.div=divAux;
        };
        /*....*/
    };

当我尝试初始化时，它可以工作。

divMensaje=new DivCanvas();
        divMensaje.setWidth(micanvas.width);
        divMensaje.setHeight(micanvas.height/4); //112
        divMensaje.setX(0);
        divMensaje.setY(micanvas.height-(micanvas.height/4)); //336
        divMensaje.getDiv().id="mensaje";

但是当我尝试绘制时不起作用。当我尝试这样做时，我的代码停止了。

divMensaje.dibujar();

Answer 1

正如您在MDN的文档中所看到的那样：

CanvasRenderingContext2D.drawImage()

void ctx.drawImage(image, dx, dy);

  

图片
  要绘制到上下文中的元素。该规范允许任何画布图像源（CanvasImageSource），例如HTMLImageElement，HTMLVideoElement，HTMLCanvasElement或ImageBitmap。

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

专注于此：

  

HTMLImageElement，HTMLVideoElement，HTMLCanvasElement或ImageBitmap

CanvasImageSource的所有变量 - div都不是。 （MDN：https://developer.mozilla.org/en-US/docs/Web/API/CanvasImageSource）