<canvas>のスケーリング時に補間を無効にする
注：これはどのように関係しているスケールアップ時に既存のcanvas要素がレンダリングされている、いない線やグラフィックスのレンダリング方法を行うにはキャンバスの表面に。つまり、これは、スケーリングされた要素の補間に関するすべてのことであり、キャンバスに描画されるグラフィックのアンチエイリアスとは何の関係もありません。ブラウザがどのように線を引くかについては気にしていません。拡大したときに、ブラウザー要素がキャンバス要素自体をどのようにレンダリングするかを気にします。 <canvas>要素をスケーリングするときに補間を無効にするようにプログラムで変更できるキャンバスプロパティまたはブラウザ設定はありますか？クロスブラウザソリューションは理想的ですが、必須ではありません。Webkitベースのブラウザーが私の主なターゲットです。パフォーマンスは非常に重要です。 この質問は最も類似していますが、問題を十分に説明していません。それが価値があるもののために、私はimage-rendering: -webkit-optimize-contrast無駄にしようとしました。 アプリケーションは、必要なものを明確にするためにHTML5 + JSで書かれた「レトロ」な8ビットスタイルのゲームになります。 説明のために、ここに例を示します。（ライブバージョン） 21x21のキャンバスがあるとしましょう... <canvas id='b' width='21' height='21'></canvas> ... CSSがあり、要素を5倍にします（105x105）： canvas { border: 5px solid #ddd; } canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */ キャンバスに単純な「X」を次のように描画します。 $('canvas').each(function () { var ctx = this.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(21,21); ctx.moveTo(0,21); ctx.lineTo(21,0); ctx.stroke(); }); …