html5 キャンバス描画チュートリアル (2) — 直線の描画と color/endpoint/intersection などの線スタイルの設定_html5 チュートリアル スキル

Canvas が何なのかまだわからない場合は、前の記事を読んでください 描画を学ぶとき、線は最も基本であり、線の接続によってあらゆるグラフィックを形成できます。 Canvas でも同様です。
始める前に、キャンバスとブラシを取り出しましょう:

コードをコピーしますコードは次のとおりです:

var cvs = document.getElementById('cvs'); // キャンバス
var ctx = cvs.getContext('2d') // ブラシ

描いてみよう 書くとき、開始点は固定されておらず、いつでも変更できます。 Canvas は手書きで描画点を決定するわけではありませんが、moveTo というメソッドがあります。 moveTo の関数は、ペン先をキャンバスから持ち上げて、指定された点 (つまり、座標) に移動することに相当します。

コードをコピーしますコードは次のとおりです:

ctx.moveTo(x, y)

このプロセス中にグラフィックスは描画されません。これは、キャンバス上でペンをぶら下げているのと同じです。
でも、ぶらぶらしていても仕方ないので、絵を描き始めなければなりません。最初に最も単純な直線を描画しましょう。
直線を描画するメソッドは lineTo であり、そのパラメーターは point である moveTo と同じです。
ctx.lineTo(x,y) 当然、線を引くと描画点も移動しますので、lineTo以降は描画点が対象点となります。

コードをコピーしますコードは次のとおりです:

ctx.moveTo(100,100) ;
ctx.lineTo(200,100);

Web ページを更新すると、キャンバス上に予想される行がまったく表示されないことがわかります。なぜなら、lineTo は実際には描画された「パス」であり、それ自体は目に見えないからです。彼を表示したい場合は、彼を「描く」必要があります。
PS を使用したことのある生徒は、グラフィックの 2 つのモード、1 つは塗りつぶし、もう 1 つはストロークであることを確実に知っているでしょう。線を描画したことは、PS でパスを描画したことと同じです。この時点で、パスのエッジを描画することができ、グラフィックスが表示されます。
キャンバスのストローク メソッドはストローク()です。次にコードを完成させましょう:

コードをコピー

ctx.moveTo(100,100);


ctx.bottom();線を見たことができます。もちろん、数百のパスを連続して描画し、その後ストローク アクションを実行して数百の線を一度に描画することもできます。次に、4 つの線で四角形を描画しましょう:

コードをコピーします コードは次のとおりです:

ctx.moveTo(100,100);

ctx.lineTo(200,200); ;
ctx.ストローク();


ここでは、最初にパス全体を描画してから、一度にストロークします。
——–作者の不満: Canvas 描画の欠点の 1 つは、基本的に推測に基づいており、非常に直感的ではないことです。
重要な注意事項: キャンバスの描画プロセス (塗りつぶしやストロークなど) は非常にリソースを消費します。システム リソースを節約して効率を向上させたい場合は、すべてのパスを描画してからグラフィックスを一度に塗りつぶすかストロークするのが最善です。
上の図から、デフォルトの線の太さは 1px、線の色は黒であることがわかります。もちろん設定できるのですが、不思議なのは、線幅の設定は lineWidth ですが、線のスタイルの設定は、なぜ lineStyle ではないのでしょうか。私にも分かりません。 :

コードをコピー

コードは次のとおりです: ctx.lineWidth = 10 ; ctx.ストロークスタイル = 'rgba(255,0,0,0.5)';
上記のコードは、線の幅を 10px に、線の色を半透明の赤に設定します。

図 1 に示すように、更新してください。何か問題があるようです。左上隅に小さな部分が欠けているのはなぜですか?これは幻想ではありません。その理由はキャンバスの線の描き方から始まります。
質問: 描画した長方形のパスの幅と高さが 100、辺の線の幅が 10 ピクセルの場合、辺を描画した長方形の全体の幅と高さはいくらですか? 100 10*2=120ですか？
エッジがパスの外側に完全に描画されている場合は 120 になります。しかし、キャンバスはそうではありません。 Canvas のすべての線には「中央線」があり、線の絶対的な中央に位置し、線のストロークは中心線から両側に伸びます。たとえば、線の幅が 1 の場合、中心線は 0.5 にあり、幅が 5 の場合、中心線は 2.5 になります。キャンバス グラフィックスをストロークすると、パスは線の中心線に合わせてストロークされます。図 2 に示すように:

つまり、トレースすると、線の半分が外側に、半分が内側になります。つまり、上の長方形の全体の幅は 100 (10/2)*2 で、110 に等しくなります。 🎜 >左上の角が欠けて見えるのはこのためです。ここでは絵を描く人がいないからです。
しかし、残りの角にはなぜ切り込みが入っていないのでしょうか?写真の四隅に隙間があるように見えませんか？
それは、線を描くときにブラシを「持ち上げ」ていなかったためです。つまり、ブラシが連続していたためです。つまり、moveTo がありませんでした。信じられない場合は、今すぐ移動しましょう:

コードをコピーします コードは次のとおりです:

ctx.moveTo(100,100);
ctx.moveTo(200,100); 🎜>ctx.lineTo(100,200);
ctx.lineWidth = 10;
ctx.ストロークスタイル = 'rgba(255,0,0,0.5)'; >ctx.ストローク();


2行目を描画する前にmoveToを実行しましたが、moveToの座標は変わりませんでしたが、更新するとグラフは次のようになりました。写真3]:

分かりましたか?ペンを持ち上げたからです。
それでは、moveTo を削除して、左上隅の欠けている部分を埋める方法を考えてみましょう。
まず最初に質問させてください、私たちの道は閉ざされているのでしょうか？これはナンセンスではありませんか？もちろん閉まってますよ！

違います!これはパスの終点を始点と一致させるだけで、パス自体は閉じません。 キャンバスでパスを閉じるにはどうすればよいですか? closePath() を使用します。

コードをコピーします

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

ctx.moveTo(100,100); ctx.lineTo(200,200); ctx.lineTo(100,100); ctx.closePath( );//閉じたパス

ctx.lineWidth = 10;

ctx.ストロークスタイル = 'rgba(255,0,0,0.5)'

>

この時点で更新すると、完全な正方形になります。図 4:

線をどれだけ太くしても、線が太ければ太いほど、より多くの人に好まれますよね? ————この正方形の四隅は規則的な直角であり、丸みはありません。丸い角はどうでしょうか？ PS、図 5 の四角形のストロークを見てください:

ご覧のとおり、エッジが厚くなるほど、角の円弧が大きくなります。
Canvas のエッジを PS のエッジと同じにしたい場合、何か方法はありますか?もちろん、それは lineJoin 属性です。
lineJoin は線の交点を意味し、図 6 に示すように、miter (デフォルト、鋭い角)、bevel (ベベル)、round (丸い角) の 3 つの属性があります。長方形の角が鋭いことがすぐに理解できることは間違いありません。そのため、角を丸めたものに変更してみます。
グラフィックは次のようになります。 図 7:

PS に少し似ています。 、 右？
さらに、前の図から、キャンバスの線の端が平らになっていることがわかります。これは変更できますか?結局のところ、平らで見栄えが良くありません。 も可能です。つまり、線の終点を定義する lineCap 属性です。図 8 に示すように、lineCap には 3 つの値があります: butt (平ら、デフォルト)、round (円)、square (正方形)。


実際には平らなヘッドであることが画像を見るとわかります。四角頭も同じですが、平頭の方があまり出っ張らない点が違います。丸頭も角頭もしばらく出っ張りますが、この部分の長さはどのくらいでしょうか？それは線の幅の半分です。
何か考えたことはありますか？はは、前の閉じたパスの問題では、lineCap を四角形の頭に設定すると、効果は同じになります。 しかし、安全のために、私たちは依然として道を閉鎖しなければなりません、覚えておいてください!
また、思い出していただきたいのですが、閉じたパスには終点がありません。したがって、エンドポイント スタイルは閉じたパス上では見ることができません。

また
: lineCap は lineJoin に似ているため、混同しないように注意してください。
鋭い目を持っていても運が悪いと、1 ピクセルの線が 1 ピクセルの幅ではなく、もっと広くてぼやけて見えることがあります。図 9 に示すように:
おめでとうございます!バグではないバグが発生しました。これについては次の記事でお話します。