javascript - HTML5 Canvas .translate和.scale导致图像上出现锯齿状边缘

这是一个示例:Codepen。只需单击 Canvas 上的任意位置(它将具有黑色边框)，就会绘制一个紫色星空。

如您所见，恒星的边缘呈锯齿状。它是使用.translate和.scale绘制的。为了证明.translate和.scale造成了锯齿状边缘，请转到第28行(在CodePen JavaScript部分中)并将其取消注释。然后注释掉第27行。在 Canvas 上单击时，绘制的星星没有.translate和.scale，但没有锯齿状的边缘。

星形是在Adobe Illustrator中绘制的，并以300x300px PNG格式导出。

更新:
我需要使用PNG。没有JPG，SVG等。

如何解决此问题？

到目前为止，我已经尝试过但没有帮助的内容:

在Adobe Illustrator的“常规首选项”中关闭了抗锯齿功能

在Adobe Illustrator的文档栅格和效果设置中关闭了抗锯齿功能

在Illustrator的“文档栅格和效果设置”中使用的屏幕为72ppi，而不是300ppi(默认值)

在星星上画一个笔触(边界)，使该笔触具有0％的不透明度。我以为只是边界/边缘变得锯齿。因此，我认为该笔画将是“不可见的”，即canvas仅会使0％不透明度笔画变为锯齿状，因此不会出现锯齿状。但这也不起作用。

我尝试使用以下CSS建议的“hacks”:
canvas { image-rendering: crisp-edges; /* Older versions of FF */ image-rendering: -moz-crisp-edges; /* FF 6.0+ */ image-rendering: -webkit-optimize-contrast; /* Safari */ image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ /*image-rendering: pixelated; // Awesome future-browsers */ image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; /*IE*/ }

我也尝试使用此JavaScript“hack”:
context.webkitImageSmoothingEnabled = true; context.mozImageSmoothingEnabled = true; context.imageSmoothingEnabled = true; /// future

注意:，我在Safari，Firefox和Chrome上尝试了Codepen中本地的所有代码，然后再将它们全部添加到Codepen中。

最佳答案

如果将星标更改为vector，它将解决此问题。

star_img.src='data:image/svg+xml;utf8,<svg width="300px" height="275px" viewBox="0 0 300 275" xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon fill="#fdff00" stroke="#605a00" stroke-width="15" points="150,25  179,111 269,111 197,165 223,251  150,200 77,251  103,165 31,111 121,111" /></svg>';

http://codepen.io/anon/pen/QyBGMv

关于javascript - HTML5 Canvas .translate和.scale导致图像上出现锯齿状边缘，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35139999/