HTML5 キャンバスの線描画スキル - 1 ピクセル幅の細い線を描く_html5 チュートリアル スキル

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

コードをコピー

コードは次のとおりです。

ctx.beginPath();
ctx.lineTo(300,100); 🎜>

操作の結果描かれた線は、1ピクセルの幅の線ではありません

非常に太い感じです。さまざまな線画とは大きく異なります。 Web 版でよく見られるエフェクト

同様に、HTML5 Canvas をもっと良くすることは考えなかったのでしょうか。
実は根本的な理由は、Canvas の描画が途中から開始されないことです。

ですが、0.5 から 1 ではなく 0 から 1 0 ~0.5 の描画方法なので、

ではフェードがエッジに発生し、線が非常に広く見えます。

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

平行移動(0.5、0.5)です。実装コードは以下の通りです。

転位カバレッジ法 元のコンテキストの関数にラップしました





コードをコピー

コードは次のとおりです: /**

*

1 つのピクセル線を描画します

* @param fromX

* @param formY
* @param toX
* @param toY
* @param backgroundColor - デフォルトは白
* @paramvertical - ブール値
*/
CanvasRenderingContext2D.prototype.onePixelLineTo = function(fromX, fromY, toX, toY, backgroundColor,垂直) {
var currentStrokeStyle = this.drawingStyle;
this.beginPath();
this.lineTo(toX, toY); .closePath();
this.lineWidth=2;
this.beginPath();
this.moveTo(fromX 1, fromY);
this.lineTo(toX 1, toY);
this.moveTo(fromX, toY 1); >}
this.closePath();
this.strokeStyle=backgroundColor;
this.ストロークスタイル = currentStrokeStyle;


センターの翻訳メソッドのコードは次のとおりです:





コードをコピーします


コードは次のとおりです:


ctx.save();

ctx.lineWidth = 1; ;
ctx.moveTo(10, 100);
ctx.ストローク();すべての座標点が整数であることを確認することに特別な注意を払ってください。そうしないと、HTML5 でエッジ アンチエイリアス

が自動的に実装され、ピクセル直線の 1 つが太く見えます。

操作の効果: これは HTML5 Canvas の線画のちょっとしたトリックです。

と思ったら高評価をお願いします。良い。