HTML5：使用画布渲染绝对图像答案

【问题标题】：HTML5: Rendering absolute images using canvasHTML5：使用画布渲染绝对图像
【发布时间】：2011-12-25 05:08:57
【问题描述】：

作为 HTML5 介绍的一部分，我正在尝试使用画布。这构成了作业，但我根本不寻求实际课程作业的任何帮助。

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

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

我认为这是在调整窗口大小时缩放/倾斜图像的自然行为，所以我通过在调整窗口大小后简单地重绘整个东西来克服这一点。

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

我通常会尝试自己解决，但我没有时间思考为什么，因为我不知道为什么一旦在画布上绘制图像，它甚至会缩放/倾斜图像。出于明显的原因，我无法共享代码。我还应该提到，画布的尺寸是视口的总宽度，因为我正在开发游戏。

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

感谢您的帮助。

【问题讨论】：

【解决方案1】：

似乎您使用 css 设置了画布的尺寸。尝试将它们定义为 html 属性。示例：

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

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

【讨论】：

感谢您的回复。这没有任何区别。我一开始尝试使用 HTML 属性来调整它的大小，它似乎将 100 视为像素。使用百分比似乎也不起作用，所以我用 CSS 和 JS 来确保它在 X 和 Y 中是 100%。这很奇怪。
这些是像素（没有 %）。尝试创建一个干净的 HTML 页面，其中只有一个画布元素并且尺寸设置为 1000/1000 像素（没有任何 css）。如果它仍然无法按预期工作，您将不得不再次重新考虑您的 JavaScript 代码。
是的，问题是我使用 CSS 设置画布的尺寸。画布元素被视为图像，我实际上是用 CSS 缩放画布而不是调整它的大小。谢谢您的帮助。 – 标记一下

【解决方案2】：

是的，问题是我使用 CSS 设置画布的尺寸。画布元素被视为图像，我实际上是用 CSS 缩放画布而不是调整它的大小。谢谢您的帮助。 – 标记一下

【讨论】：