在画布中调整图像大小时，浏览器如何处理图像重新采样？

Question

嗨，我正在使用canvas元素和jQuery创建一个视频游戏。部分原因是需要绘制拱形路径和圆圈。不幸的是，这会产生子像素和抗锯齿问题。没有浏览器允许您简单地禁用抗锯齿，所以我一直在考虑使用其中包含圆圈的图像。另一部分是游戏窗口可以根据浏览器窗口改变大小，因此会改变其中的图像大小。

我的问题的一个更全面的例子是：如果我在（例如）80px创建图像并且游戏想要将其缩放到37px，我可以将其作为游戏中对象的预渲染吗？另外，如果我这样做，画布会用子像素渲染它吗？

P.S。我不是在寻找任何代码示例，这只是一个技术问题，我似乎无法找到任何文档。

Answer 1

这可以帮助您扩展使用图像而不是路径来绘制非插值图像的想法。

ctx.imageSmoothingEnabled       = false;
ctx.mozImageSmoothingEnabled    = false;
ctx.oImageSmoothingEnabled      = false;
ctx.webkitImageSmoothingEnabled = false;

同时确保在提供位置和尺寸时使用整数;

ctx.drawImage(something, x | 0, y | 0);