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

Question

我有一堆png地图图块，我试图在画布元素上拼接在一起。

jsFiddle

我正在使用0到99（id）的计数器制作10x10磁贴，以跟踪我的目标。这是绘制图像的线条：

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

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

我有理由相信应该可以工作，但它似乎只是在画布上绘制一个拉伸的瓷砖而不是全部100个。当我检查控制台上的内容时，图像看起来是正确的形状和内容瓦。只是似乎没有放在画布上。有没有人有任何想法？

Answer 1

不在画布上使用jQuery的一个原因：

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

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

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

Modified fiddle