javascript - 无法转换 CanvasRenderingContext2D.drawImage 的参数 1(尝试在 Canvas 对象上绘制图像)

Question

我正在尝试制作可与 canvas.drawImage() 一起使用以显示图像但只绘制一次的对象缓存。我不断收到此错误，我尝试了一些在线找到的答案，例如:canvasObject.get(0) and canvasObject[0] and unwrap(canvasObject) 在将它们放入绘图上下文之前，但都没有作品。我在上面找不到任何东西。希望有人可以提供帮助。这是我的代码:

var canvas = full canvas that cached drawings should draw to
var temp = {};
var h = heightOfGridSquare; 
var w = widthOfGridSquare;

 var canvasElementForCache = document.createElement('canvas');
 canvasElementForCache.width = w * 2; // so that i can draw pictures larger then single grid square
 canvasElementForCache.height = h * 2;
 var cachedCanvas = canvasElementForCache.getContext(ctx);

// cache drawing in app object
var cacheDrawing = function ( name ){
    app.cache[name] = objectRepo[name](cachedCanvas);
};

var objectRepo = {
    someObjectName: function (canv) {
        var m = temp.coordinates;
        canv.fillStyle = "rgba(0,0,200,0.9)";
        canv.fillRect(m.x + 25, m.y + 25,50, 50); // random filler (x and y are coordinates defined in the draw object funciton )
        return canv;
    },
};

var drawObejectAtCoordinates = function ( x, y ) {
     var px = ( x - ( w / 2 ));
     var py = ( y + ( h / 2 ));
     if ( app.cache[name] === undefined ){
            temp.coordinates = { x:px, y:py };
            cacheDrawing(name);
     }
     // drawing on actual canvas
     canvas.drawImage( app.cache[name], px, py );
};

var render = function () {
    drawObejectAtCoordinates( coordinateX, coordinateY );


  // this is just a place holder, my actual code is very long and has different rendering methods.. 
  // just know that it is being rendered ( not super important though since the error occurs at drawImage not render ) 
    window.requestAnimationFrame(render);
}

这大部分是准确的，为简洁起见，我更改了小部分。但没有遗漏任何与我遇到的问题相关的内容。如果有人可以提供帮助，我将不胜感激!

错误信息是:

TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.

当我控制台记录缓存 Canvas 对象的内容时，它看起来像这样:

CanvasRenderingContext2D { canvas: <canvas>, globalAlpha: 1, globalCompositeOperation: "source-over", strokeStyle: "#41471d", fillStyle: "#ff8800", shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 0, shadowColor: "rgba(0, 0, 0, 0)", mozCurrentTransform: Array[6] }

这是一个 jsFiddle 示例:https://jsfiddle.net/1krgqeq7/3/

Answer 1

这里有很多问题使得这段代码很难理解:

1) 您正在以一种令人困惑的方式重用变量 cachedDrawing(它是元素还是函数？)

2) 你使用了一个名为 temp 的变量，这通常是一种代码味道，尤其是当你没有在它的声明附近使用它时(不存在于代码中)样本)。也不清楚为什么你的藏匿坐标。

3) 您使用了相当数量的描述性变量名称，但除了 temp 之外，您还使用了相当非描述性的“obj”

但您的问题(与上述 1 相关)的答案是您传递的是上下文，而不是它的来源 Canvas 。不要重新分配该 var 并将其传递到缓存中。

使用更具描述性的变量名称(如 cachedCanvas 是 Canvas ，cachedCtx 是其上下文)可能更容易发现此类问题。