javascript - 尝试使用canvas元素从图 block 创建单个 map 图像

Question

我有一堆 png map 图 block ，我正在尝试将它们拼接在 Canvas 元素上。

jsFiddle

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

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

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

我相当有信心这应该可行，但它似乎只是在 Canvas 上绘制了一个拉伸(stretch)图 block ，而不是所有 100 个图 block 。当我检查控制台以了解加载的内容时，每个图像的形状和内容似乎都是正确的瓦。只是似乎没有被放置在 Canvas 上。有人有什么想法吗？

Answer 1

不在 Canvas 上使用 jQuery 的一个原因:

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

:) 因为它指的是元素大小，而不是位图。我建议使用:

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

Modified fiddle