【发布时间】：2016-05-10 11:06:43
【问题描述】：
这是一个示例：Codepen。只需单击画布中的任意位置（它将有黑色边框），就会绘制一个紫色的星星。
如您所见，星形边缘呈锯齿状。它是用.translate 和.scale 绘制的。要证明 .translate 和 .scale 导致锯齿状边缘，请转到第 28 行（在 CodePen JavaScript 部分中）并取消注释。然后注释掉第 27 行。当您单击画布时，绘制的星形没有.translate 和.scale，但它没有锯齿状边缘。
星星是在 Adobe Illustrator 中绘制的，并以 300x300 像素的 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 中。
【问题讨论】：
-
您正在缩放位图数据。摆脱那些锯齿状边缘没有简单的方法。你能把星星画成矢量而不是使用位图数据吗？
-
从一个较大的 .png 文件开始，然后按比例缩小以减少失真。顺便说一句，您可以缩放 html5 画布和 svg 路径而不会失真。
-
我同意markE，对于这个形状使用上下文绘图操作。此外，imagesmoothingenabled 默认为 true，您可能希望将其设置为 false。
标签： javascript html canvas