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

Question

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

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

星星是在 Adob​​e Illustrator 中绘制的，并以 300x300 像素的 PNG 格式导出。

更新: 顺便说一下，我需要使用 PNG。没有 JPG、SVG 等

我该如何解决这个问题？

---

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

1. 在 Adob​​e Illustrator 的常规首选项中关闭抗锯齿
2. 在 Adob​​e Illustrator 的文档光栅和效果设置中关闭抗锯齿
3. 在 Illustrator 的文档光栅和效果设置中使用屏幕 72ppi 而不是 300ppi(默认)
4. 在星星上画笔划(边框)并使此笔划的不透明度为 0%。我认为只有边界/边缘会出现锯齿状。因此，我认为笔划将是“不可见的”，因为 canvas 只会使 0% 不透明度笔划呈锯齿状，因此没有任何东西看起来呈锯齿状。但这也没有用。

5. 我已经尝试使用这些 CSS 建议的“hacks”:

   Canvas { 图像渲染:清晰的边缘；/* 旧版本的 FF */ 图像渲染:-moz-crisp-edges；/* 法郎 6.0+ */ 图像渲染:-webkit-optimize-contrast；/* 苹果浏览器 */ 图像渲染:-o-crisp-edges；/* OS X & Windows Opera (12.02+) */ /*图像渲染:像素化；//很棒的 future 浏览器 */ 图像渲染:优化对比度； -ms-插值模式:最近邻；/*IE*/ }

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

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

---

注意:在将所有代码添加到 Codepen 之前，我已经在 Safari、Firefox 和 Chrome 上本地尝试了 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