HTML5 Canvas は 1 ピクセル幅の細い線の描画を実装します

ピクセル幅の細い線を描画します。HTML5 Canvas を使用して実装する場合は、すべての座標点が整数であることを確認するように特に注意してください。そうしないと、HTML5 が自動的にエッジ アンチエイリアスを実装します。興味のある方はレンダリングを見てください。

オーソドックスなHTML5 Canvasでの以下のコード

ctx.lineWidth = 1; 
ctx.beginPath(); 
ctx.moveTo(10, 100); 
ctx.lineTo(300,100); 
ctx.stroke();

演算結果は1ピクセル幅の線ではありません

Webでよく見る様々な線画効果とは大きく異なります。バージョン

HTML5 Canvas ですか? これ以上うまくできるとは思いませんでした

実際、根本的な理由は、Canvas の描画が 0.5 からではなく 0 から 1 から始まることです

1 + 0 から 0.5 なので、

にフェードが発生します。エッジでは、ラインが非常に幅広に見えます。

解法は2つあり、1つは転位被覆法、もう1つは中心

平行移動(0.5、0.5)です。実装コードは次のとおりです:

転位カバレッジメソッド 元のコンテキストの関数にパッケージ化しました

/** 
* <p> draw one pixel line </p> 
* @param fromX 
* @param formY 
* @param toX 
* @param toY 
* @param backgroundColor - default is white 
* @param vertical - boolean 
*/ 
CanvasRenderingContext2D.prototype.onePixelLineTo = function(fromX, fromY, toX, toY, backgroundColor, vertical) { 
var currentStrokeStyle = this.strokeStyle; 
this.beginPath(); 
this.moveTo(fromX, fromY); 
this.lineTo(toX, toY); 
this.closePath(); 
this.lineWidth=2; 
this.stroke(); 
this.beginPath(); 
if(vertical) { 
this.moveTo(fromX+1, fromY); 
this.lineTo(toX+1, toY); 
} else { 
this.moveTo(fromX, fromY+1); 
this.lineTo(toX, toY+1); 
} 
this.closePath(); 
this.lineWidth=2; 
this.strokeStyle=backgroundColor; 
this.stroke(); 
this.strokeStyle = currentStrokeStyle; 
};

中心変換メソッドのコードは次のとおりです:

ctx.save(); 
ctx.translate(0.5,0.5); 
ctx.lineWidth = 1; 
ctx.beginPath(); 
ctx.moveTo(10, 100); 
ctx.lineTo(300,100); 
ctx.stroke(); 
ctx.restore();

すべての座標点が一致するように特別な注意を払ってください。整数である場合、HTML5 は自動的にエッジを実装します。アンチエイリアス

により、1 ピクセルの直線が太く見えます。

実行中のエフェクト:

今のエフェクトはどうですか? これは HTML5 キャンバスで線を描くためのちょっとしたトリックです

良ければ高評価をお願いします。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

html5 Canvas は、閉じられていないパスを描画し、グラデーション カラーを塗りつぶすメソッドを実装します

html5 Canvas は、直線の描画と線スタイルの設定を実装します

以上がHTML5 Canvas は 1 ピクセル幅の細い線の描画を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。