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

Question

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

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

附：我不是在寻找任何代码示例，这只是一个技术问题，我似乎找不到任何文档。

Answer 1

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

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

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

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