Question

我正在尝试使用canvas作为HTML5简介的一部分。这构成了作业，但我并不是要求对实际课程作出任何帮助。

我正在尝试编写渲染引擎，但没有运气，因为一旦在画布上绘制图像，它看起来非常扭曲，而不是图像本身的正确尺寸。

我制作了一个动画引擎，将图像加载到一个数组中，然后以一定的速度迭代它们。这不是问题，我认为这不会导致问题，因为当我在没有动画组件的情况下将图像绘制到画布时会发生这种情况。

我认为当调整窗口大小时，这是缩放/倾斜图像的自然行为，所以我通过在调整窗口大小后重新绘制整个内容来征服它。

我使用的图像是等距的，并以像素级别绘制。这会导致失真吗？似乎设置drawImage（）函数的尺寸都不起作用。我正在使用JavaScript来操作和渲染画布。

我通常会尝试自己解决这个问题，但我没有时间去思考为什么，因为我不知道为什么它会在画布上绘制后缩放/倾斜图像。由于显而易见的原因，我无法分享代码。我还要提一下，画布的尺寸是视口的总宽度，因为我正在开发游戏。

我的问题是：有没有人遇到过这个问题，我该如何纠正？

感谢您的帮助。

Answer 1

似乎你用css设置了canvas的尺寸。尝试将它们定义为html属性。例如：

<canvas id="test" width="100" height="100">Fallback content</canvas>

编辑：它会将canvas元素的宽度/高度设置为100/100像素。

Answer 2

是的，问题是我用CSS设置了画布的尺寸。 canvas元素被视为一个图像，我实际上是使用CSS缩放画布而不是调整它。谢谢您的帮助。 - 马克刚刚