为像素艺术游戏操作 html Canvas 中的元素答案

【问题标题】：Manipulate elements inside html Canvas for Pixel Art Game为像素艺术游戏操作 html Canvas 中的元素
【发布时间】：2014-12-18 10:04:49
【问题描述】：

我正在开发我的第一个 HTML5 手机游戏，我正在为图像使用像素艺术风格。

我不知道我这样做是否正确...最初我打算创建一个很大尺寸的像素艺术图像，以便以后可以根据设备的屏幕调整它们的大小。但是现在我看到了这种方法，我可以使用实际像素绘制像素艺术并在浏览器中调整它们的大小。

我做了一些研究，发现为了在不损失质量的情况下拉伸像素艺术图像，我需要将它们绘制到 html 画布中并禁用图像平滑。我设法用 JavaScript 为我的所有图像构建了一个图像加载器，并将它们全部加载到画布中，调整它们的大小......没问题。

但是现在，我应该如何处理这些图像？据我所知，它们不是元素......我无法为它们分配类或 ID。

我应该为每张图片创建一个画布吗？我这样做对吗？

【问题讨论】：

【解决方案1】：

画布有自己的规则。它内部的元素不像普通的 HTML 元素那样被控制。查找 canvas API，如果它不适合您的需要，只需使用普通 HTML 设置中的图像即可。

【讨论】：

【解决方案2】：

Disable antialising when scaling images

不确定是否使用 HTML Canvas，但您可以尝试该链接中的 CSS 设置来禁用页面中图像的抗锯齿功能。

【讨论】：

在 Chrome 中不起作用，但总体而言这是一个很好的解决方案。但是我仍然对整个画布而不是画布感到好奇。
我个人从未使用过 HTML 画布，但您似乎可以用坐标和尺寸绘制画布中的图像，并以这种方式访问它们......假设我读了你的原始帖子正确，并且您有多个图像停靠在一个画布中。