【发布时间】：2016-08-26 13:18:07
【问题描述】：
我正在使用画布在 HTML5 中制作游戏。
当我使用 CanvasRenderingContext2D.drawImage 绘制从图像中裁剪的纹理时，您有时会在图像中看到一小部分周围的纹理。
一个例子是当我从这个图块集中渲染我自己的文本时：font "tileset"，根据浏览器窗口的宽度和高度，您有时可以看到相邻图块的一瞥。在这里你可以看到下面的一些字母：text，如果我将浏览器高度更改一个像素，它就会消失。
似乎图形故障是否发生取决于浏览器窗口的高度/宽度。如果将高度更改 1 个像素，它就会消失，如果再更改 1 个像素，它就会返回。
有谁知道如何解决这个问题？如果没有，我应该尝试像手动逐个像素地绘制图像还是像在图块集中添加一个像素的边距？
【问题讨论】：
-
您回答了自己的问题。使用稍大的精灵表（文本图像），字符之间有几个像素的间隔。
-
@markE 好吧，如果有其他方法，我真的不想这样做，这就是我问的原因。
-
羞于避免最简单的解决方案，但或者，画布具有半像素分辨率，所以我想你可以将裁剪区域扩大半像素，看看是否会忽略噪音。如果这不起作用，您将重新使用更大的精灵表。
-
@markE 哦，谢谢！那行得通，您应该将其作为答案提交！
-
很高兴我能提供帮助...我在答案中发布了这两种解决方案。祝你的项目好运！。
标签： html5-canvas tile visual-glitch