Question

我是HTML5和canvas元素的新手，在过去的几周里，我一直在努力更好地理解它。无论如何，当我尝试将此代码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

您正在尝试将网址传递到drawImage，这是您无法做到的 - 您需要加载图片元素并在图片加载完成后传递它。

This article有我所描述的例子。

代码最终会是这样的：

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（Forbidden）”错误。

未捕获的TypeError：使用drawImage键入错误

2 个答案: