HTML5キャンバス.translateと.scaleによって画像にギザギザのエッジが発生する

Question

サンプルはCodepenです。キャンバスのどこかをクリックするだけで（黒い枠線が表示されます）、紫色の星が描画されます。

ご覧のとおり、星のエッジがギザギザになっています。それは.translateと.scaleと描かれています。 .translateと.scaleがギザギザのエッジを引き起こしていることを証明するには、28行目（CodePen JavaScriptのセクション）に移動し、コメントを外します。キャンバスをクリックすると、星は.translateと.scaleなしで描画されますが、エッジにギザギザがありません。

スターはAdobe Illustratorで描画され、300x300pxのPNG形式で書き出されます。

更新： 途中でPNGを使用する必要があります。いいえJPG、SVGなど

この問題を解決するにはどうすればよいですか？私がこれまで試したが、助けにはならなかった何

---

：

1. は、Adobe Illustratorの一般設定でアンチエイリアシングをオフにし
2. は、Adobe IllustratorのドキュメントRasterのアンチエイリアシングをオフにしおよびエフェクトの設定
3. Illustratorのドキュメントラスタとエフェクトの設定で、300ppi（デフォルト）の代わりに72ppiを使用しました。
4. ストロークこのストロークに0％の不透明度を持たせました。私はぎざぎざになっているのは境界/エッジだけだと思った。だから、ストロークは "不可視"だと思った。canvasは、不透明度0％のストロークをギザギザにするだけなので、ギザギザのように見えることはない。しかし、これはどちらもうまくいかなかった。私も、このJavaScriptの "ハック" を使用してみました

   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*/ }

5. ：

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

---

私はこれらのCSSを使用してみました

は "ハック" を提案しました

注： 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