尝试使用 canvas 元素从图块创建单个地图图像

Question

我有一堆 png 地图图块，我试图将它们拼接在 canvas 元素上。

jsFiddle

我正在制作一个 10x10 的图块，其计数器从 0 到 99 (id) 以跟踪我的进度。这是绘制图像的线：

ctx.drawImage(this, id%10*imgWidth, Math.floor(id/10)*imgHeight, imgWidth, imgHeight);

其中 id 是从 0 到 99 的某个数字，imgWidth 是每个图块的宽度，imgHeight 是每个图块的高度。

我有理由相信这应该有效，但它似乎只是在 canvas 上绘制了一个拉伸的图块，而不是全部 100 个。当我检查控制台加载的内容时，图像似乎是每个瓷砖的正确形状和内容。只是似乎没有放在 canvas 上。有人有什么想法吗？

Answer 1

不将 jQuery 与 canvas 一起使用的一个原因：

$('canvas').width(imgWidth*10).height(imgHeight*10);

:) 因为这是指 元素 大小，而不是位图。我建议改用：

myCanvas.width = imgWidth*10;
myCanvas.height = imgHeight*10;

Modified fiddle