ここでわかるように、キャンバス要素のエッジ/ラインがぼやけていて（Chrome、IE、FF）、いわゆる「のこぎり歯効果」があるのはなぜですか（この表現は英語に存在しますか？:-)）：
これは最初の簡単な試行です。何か間違ったことをしたのでしょうか? コードは次のとおりです。
c2 = document.getElementById('test').getContext('2d');
c2.fillStyle = '#f00';
c2.beginPath();
c2.moveTo(0, 0);
c2.lineTo(100, 0);
c2.lineTo(80, 50);
c2.lineTo(0, 50);
c2.closePath();
c2.fill();
c2.fillStyle = "#000";
c2.beginPath();
c2.moveTo(0, 50);
c2.lineTo(80, 50);
c2.lineTo(60, 100);
c2.lineTo(0, 100);
c2.closePath();
c2.fill();
このJS Fiddleにも追加しました
キャンバス オブジェクトには 2 つの「サイズ」があります。1 つは画面上のサイズで、もう 1 つはキャンバスをサポートするビットマップのサイズです。
offsetWidth/offsetHeightまたは csswidthとheight値 (つまりelement.style.widthと) を使用して最初にアクセスできますelement.style.height。代わりに、2 番目のサイズは、要素自体<canvas width=100 height=200>または設定element.widthとで指定されますelement.height。
ビットマップのサイズが画面のサイズよりも小さい場合、ブラウザは双一次補間を使用してビットマップを「拡大」し、ぼやけた効果を作成します。
代わりに画面サイズをビットマップ サイズと同じに設定するか、Retina ディスプレイのような悪いトリックを使用するデバイスでのみ、ビットマップ サイズを画面サイズの 2 倍に設定することによって、最高の鮮明なグラフィックを得ることができます (これは、画面のピクセル サイズがこれらのデバイスでは偽装されています)。
代わりに、「ぼやけた」と説明するのが単なるアンチエイリアシングである場合は、申し訳ありませんが、キャンバスに描画するときにアンチエイリアシングを無効にするポータブルな方法はありません.ピクセルデータ配列にアクセスしてJavaScriptでピクセルを自分で描画することはできません.
適切なビットマップ サイズのキャンバスは、svg の「ベクター グラフィック」とまったく同じように、可能な限り最適な方法でレンダリングされます。以下は、2 つの線のスクリーンショットのズーム ビューです。1 つはキャンバスに描画され、もう 1 つは svg から描画されたもので、明らかにどちらがどちらであるかを言う方法はありません。
