未捕获的TypeError：drawImage类型错误

Question

我是HTML5和canvas元素的新手，在过去的几周里，我一直在试图更好地理解它。 无论如何，我都会遇到Uncaught TypeError: Type error当我尝试将红色正方形从此代码http://jsfiddle.net/kmHZt/10/更改为此图像http://i.imgur.com/k73egsW.png时， Uncaught TypeError: Type error 。 。 但是当我尝试时，我总是总是得到那个Uncaught TypeError: Type error 。 这是我目前拥有的代码http://jsfiddle.net/cCDFs/ 。

如果您需要我解释更好的内容，请询问。

Answer 1

您正在尝试将URL传递到drawImage ，这是不能做到的-您需要加载图像元素，然后在图像加载完成后传递它。

本文提供了我正在描述的示例。

代码最终将如下所示：

var img = new Image();
img.onload = function() {
    context.drawImage(img, 2, 2);
}
img.src = 'http://i.imgur.com/k73egsW.png';

实际上，您的代码在加载和绘制图块时就已经做到了。

Answer 2

您需要传递给drawImage的第一个参数是Image或Canvas对象，而不是字符串。

我不太了解您使用代码实现的目标，但是如果用以下代码替换对函数的draw（）调用，则如下所示：

var otherImageObj = new Image();
otherImageObj.onload = function() {
        context.clearRect(0,0,canvas.width, canvas.height);
        for (y = 0; y <= vHeight; y++) {
            for (x = 0; x <= vWidth; x++) {
                theX = x * 32;
                theY = y * 32;
                context.drawImage(tiles[board[y+vY][x+vX]], theX, theY, 32, 32);
            }
        }
        context.drawImage(otherImageObj, 2, 2);

};
otherImageObj.src = "http://i.imgur.com/k73egsW.png";

尽管您的代码实际上可以正常工作，但是图像却出现“ 403（禁止访问）”错误。