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建议"黑客":

   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