HTML5 Canvas でピクセル幅の細い線を描画するためのコードの詳細

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

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

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

よく見る色々な描画とは違う、太い感じですWeb版の線効果

は、HTML5 Canvasのほうがよく考えられていたのではないでしょうか

実は、根本的な理由は、Canvasの描画が途中から開始されないことです

でも0から1ではなく0.5～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 Canvasの線画のためのちょっとしたトリックです

良いと思ったら、いいねしてください。

上記は、HTML5 Canvas でピクセル幅の細い線を描画するためのコードの詳細です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。