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

Question

以下是一个示例：Codepen。只需单击画布中的任意位置（它将具有黑色边框），将绘制一个紫色星。

正如你所看到的，这颗恒星有锯齿状的边缘。它是使用.translate和.scale绘制的。要证明.translate和.scale导致锯齿状边缘，请转到第28行（在CodePen JavaScript部分中）并取消注释。然后注释掉第27行。当您单击画布时，不会使用.translate和.scale绘制星形，但它没有锯齿状边缘。

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

更新 顺便说一句，我需要使用PNG。否JPG，SVG等

如何解决此问题？

到目前为止我尝试了但没有帮助：

1. 在Adobe Illustrator的常规首选项
中关闭了消除锯齿功能
2. 在Adobe Illustrator的文档栅格和效果设置中关闭了消除锯齿功能
3. 在Illustrator的文档栅格和效果设置中使用屏幕72ppi而不是300ppi（默认）
4. 在星号上设置描边（边框）并使此笔触具有0％的不透明度。我以为它只是边缘/边缘变得锯齿状。所以，我认为中风是“看不见的”，canvas只会使0％的不透明度笔画呈锯齿状，因此没有任何东西看起来像是锯齿状。但这也不起作用。

5. 我尝试过使用这些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*/ }

6. 我也尝试过使用这个JavaScript“hack”：

   context.webkitImageSmoothingEnabled = true; context.mozImageSmoothingEnabled = true; context.imageSmoothingEnabled = true; /// future

注意：我已经在Safari，Firefox和Chrome上本地尝试了Codepen中的所有代码，然后在Codepen中添加了所有代码。

Answer 1

如果您将星形变为矢量，它将解决问题。

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