2

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

如果您需要我更好地解释一些事情，请询问。

4

2 回答 2

5

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

这篇文章有我所描述的例子。

代码最终会是这样的：

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

事实上，您的代码在加载和绘制图块时已经这样做了。

于 2013-03-01T20:18:43.330 回答
0

您需要传递给 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（禁止）”错误。

于 2013-03-01T20:24:27.823 回答