HTML5キャンバスラインドローイングスキル - ピクセルごとに広い細いラインを描く

コメント：ピクセル幅の細い線を描きます。 HTML5キャンバスの実装を使用する場合、すべての座標ポイントが整数であることを確認することに特に注意してください。そうしないと、HTML5は自動的にエッジアンチアンチエイリアを実現します。興味のある友達は効果図を見ることができます

ctx.linewidth = 1;

ctx.beginpath（）;

ctx.moveto（10、100）;

ctx.lineto（300,100）;

ctx.stroke（）;

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

それがどれほど厚く感じているか、そしてWebバージョンにさまざまな線描画効果を見るのが一般的です

非常に違いますが、HTML5キャンバスがそれをより良くすると思いませんでしたか？

実際、基本的な理由は、キャンバスの描画が中央から始まっていないことです。

代わりに、0.5から1 + 0から0.5ではなく0から1に描画されるため、

これは、端のフェードにつながり、並んで非常に広く見えます。

2つの解決策があります。1つは誤ったカバレッジ方法、もう1つはセンターです

翻訳（0.5,0.5）。実装コードは次のとおりです。

誤ったオーバーレイ法を元のコンテキストの関数に包みました

/**

* <p> 1つのピクセルラインを描画します</p>

* @param fromx

* @param Formy

* @Param Tox

* @param Toy

* @Param BackgroundColor-デフォルトは白です

* @param vertical-ブール

*/

canvasrenderingContext2d.prototype.onepixellineto = function（fromx、fromy、tox、toy、backgroundcolor、vertical）{

var currentsstrokestyle = 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）;

} それ以外 {

this.moveto（fromx、fromy+1）;

this.lineto（tox、toy+1）;

}

this.closepath（）;

this.linewidth = 2;

this.strokestyle = backgroundcolor;

this.stroke（）;

this.strokestyle = currentsstrokestyle;

};

中央翻訳法コードは次のとおりです。

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キャンバスに線を描くためのヒントです

あなたがそれが良いと思うなら、それを試してみてください。