无法在画布上正确缩放图像的大小？

最近我一直在处理html5项目，但我认为我碰到了一个凹凸。目前我正在制作一个用html5和jQuery构建的简单游戏。手头的问题：在画布上正确显示图像。我所做的是创建一个1080 x 720的背景，并尝试将其放入我完全相同规格的画布中。不确定这是否是浏览器问题，或者是我在Google和堆栈搜索结果中错过的内容，但非常感谢您的帮助。（使用Firefox 26和Chrome 32）

编辑：对不起，在下面的评论休息详细..无法在画布上正确缩放图像的大小？

来源

2014-02-13 vulpcod3z

请详细描述实际问题 - 您还没有说过！ – Alnitak

对不起。基本上我创建了一个1080 x 720px的PNG，我试图在游戏中用作背景。这是一款2D平台游戏，我希望绘制的画布尺寸相同。当我加载图像时，无论如何缩小图像，它都会显示在原始图像大小的2-3倍左右。当我缩小尺寸以适应“1080x720”的画布时，它变得扭曲，看起来像是一团糟。 – vulpcod3z

这是可能，你的问题是，你使用CSS属性来设置画布的大小，而不是元素本身的width和height属性。

前者（如果指定）设置画布实际显示在页面上的大小。后者设置画布中像素的实际数量，并将默认值（AFAICR）设置为300x100。

如果两者不匹配，则所有画布操作都将被缩放。

所以，如果你只是用：

<canvas width="1080" height="720"> </canvas>

你应该罚款。

来源

2014-02-13 08:39:08 Alnitak

谢谢，我觉得有点傻，没有排除故障。 – vulpcod3z

无法在画布上正确缩放图像的大小？

回答

相关问题