Canvas を学習するには、まず線分の描画方法を知る必要があります。その後、多くの単純な線分を使用して、より複雑なグラフィックスを実現できます。たとえば、一般的なグラフ、棒グラフ、折れ線グラフなどはすべて線分によって実現されます。
基礎知識キャンバスの基本的な知識は、主に線分、グラフィック、絵、テキストなどの描画方法を知っています。キャンバスはブラウザーで描画することも、node-canvas を使用してノード サーバー上で簡単な絵を描画することもできます。この記事ではブラウザ上での描画のみを記録しています。ノード側での描画方法については、各自で確認してください。
ブラウザで描画するには、まず HTML で Canvas 要素を定義します。デフォルトの幅と高さは 300 * 150 で、 widthとheightで設定できます。 Canvas 要素スタイルの幅と高さと、Canvas 描画キャンバスの幅と高さは同じではないことに注意してください。これについては後で説明します。
<canvas id=canvas> <p>現在のブラウザはキャンバスをサポートしていません。ブラウザをアップグレードしてください。</p></canvas>
描画する前に、まず現在のキャンバスの 2D 描画コンテキスト コンテキストを取得し、その後そのコンテキストを操作して描画する必要があります。
let Canvas = document.querySelector('#canvas');if (!canvas) { throw new Error('can not find Canvas element');}// 注 2d. パラメータは小文字にする必要があります。 WebGL では、3D 描画コンテキストを取得できます。 let ctx = Canvas.getContext('2d');注: 上記のコード スニペットは後続の例では無視され、 ctx変数はキャンバスの 2D 描画コンテキストを表すために直接使用されます。
Canvas 2D 描画の座標系を見てみましょう。現在の Canvas 要素の左上隅が座標原点 (0,0)、右側の水平方向が X 軸の正の方向です。以下に示すように、垂直下方向が Y 軸の正の方向になります。移動、回転、スケールを通じて座標系を操作して、いくつかのアニメーションを実現できます。この部分については、アニメーションの知識のセクションで詳しく説明します。
線分単純な線分を描画するときは、通常、色、線幅、線端点のスタイルなどの線分のスタイルを最初に設定します。 ctxのグローバル描画スタイルを設定するには、 strokeStyleを設定します。これは、 rgbaまたは正規の 16 進数にすることができます。カラー値、またはグラデーションオブジェクトなど。次のコードは、(10,10) から (50,60) まで幅 10 の赤い線分を描画するだけです。
ctx.ストロークスタイル = '赤';ctx.lineWidth = 10;ctx.moveTo(10, 10);ctx.lineTo(50, 60);ctx.ストローク();
まずは線分の描画に関するメソッドとプロパティを見てみましょう。
関連プロパティ:
関連するメソッド:
同じ線分を描画するには、異なるlineCap値を設定してみてください
ctx.lineWidth = 10;ctx.textAlign = 'center';let Colors = ['red', 'green', 'blue'];let lineCaps = ['butt', 'round', 'square'];for ( let [index, lc] of lineCaps.entries()) { ctx.bloodStyle = Colors[index] // 線分の色を設定します ctx.lineCap = lc; // lineCap を設定します。 ctx.beginPath(); // 現在のパスをクリアします ctx.moveTo(10, 20 + 20 *index); ctx.fillText(lc, 80 , 25 + 20 * インデックス);}上図の結果からわかるように、 lineCap round と square に設定すると、round が円弧スタイル、square が長方形であることを除いて、元の線分の両端に一定の長さの端点が追加されます。スタイル。注意すべき点は、キャンバス描画コンテキスト内に同時に存在できる現在のパスは 1 つだけであることです。異なる線分を描画するには、各描画の前にbeginPath()呼び出して現在のルートをクリアし、新しいパスを開始する必要があります。
異なるlineJoin値を使用して、2 つの線分の焦点にスタイルを描画してみましょう。
ctx.lineWidth = 20;ctx.textAlign = 'center';ctx.lineCap = 'butt';let Colors = ['red', 'green', 'blue'];let lineJoins = ['bevel', 'round' , 'miter'];for (let [index, lj] of lineJoins.entries()) { ctx.ストロークスタイル = カラー[インデックス]; // 線分の色を設定します ctx.lineJoin = lj; // lineJoin を設定します ctx.beginPath() // 現在のパスをクリアします ctx.moveTo(10 + 80 *index, 20); 80 * インデックス, 20); ctx.lineTo(50 + 80 * インデックス, 60); ctx.fillText(lj, 40 + 80 * インデックス, 80);} 3 種類lineJoin 、2 つの線分のフォーカスの処理が異なることがわかります。このうち、 lineJoin=miterを設定する場合、 miterLimit属性を設定することで、線幅の半分に対するマイタ線の長さの最大比率を設定できます。この比率を超えた場合、 lineJoinベベル方式を採用します。
Canvasは実線だけでなく点線も描くことができます。 lineDashOffsetプロパティを設定し、 setLineDash()を呼び出して点線を描画します。
ctx.lineWidth = 10;ctx.textAlign = 'center';ctx.setLineDash([8, 8]) //実線部分の 8 ピクセルと隙間部分の 8 ピクセルを表します let Colors = ['red', 'green ', 'blue'];let lineDashOffsets = [1, 2, 4];for (let [index, ldOffset] of lineDashOffsets.entries()) { ctx.ストロークスタイル = Colors[index]; //線分の色 ctx.lineDashOffset = ldOffset; //オフセットを設定します ctx.beginPath(10, 20 + 20 *index); 100, 20 + 20 * インデックス); ctx.fillText(`lineDashOffset:${ldOffset}`, 160, 25 + 20 * インデックス);}図からわかるように、 lineDashOffset点線の描画を開始するために設定されたオフセットです。 setLineDash()メソッドは配列パラメータを受け入れます。配列の数が奇数の場合、デフォルトで現在の配列要素をコピーして偶数にします。 0番目の要素から実線部分の長さを表し、1番目の要素がギャップ部分の長さを表し、2番目の要素が実線部分の長さを表し、3番目の要素がギャップ部分の長さを表す場合、配列の最後の要素に到達すると、再び最初から開始されます。
ctx.lineWidth = 10;ctx.textAlign = 'center';let Colors = ['red', 'green', 'blue', 'gray'];let lineDashes = [[20, 20], [40, 40] , [20, 40], [20, 40, 20]];for (let [index, ld] of lineDashes.entries()) { ctx.ストロークスタイル = カラー[インデックス]; //カラーを設定します ctx.setLineDash(ld) //ラインダッシュを設定します ctx.moveTo(10, 20 + 20 * インデックス); + 20 * インデックス); ctx.fillText(`lineDashes:[${ld}]`, 240、25 + 20 * インデックス);} let lineDashOffset = 0; //初期 lineDashOffsetctx.strokingStyle = 'green';function animate() { if (lineDashOffset > 25) { lineDashOffset = 0; } ctx.clearRect(0, 0, width, height);現在のキャンバス ctx.lineDashOffset = -lineDashOffset // lineDashOffset を設定します。 ctx.setLineDash([4, 4]); //実線の長さと隙間の長さを設定 ctx.rect(20, 20, 100, 100) //長方形を描画します。 //現在のパスをキャンバスに追加します ストローク lineDashOffset += 1 //lineDashOffset オフセットに 1 を加えます window.requestAnimationFrame(animate); //ブラウザのフレームレートを使用してアニメーション関数を繰り返し実行します}animate();まとめ線分を描画するときは、キャンバスの現在のパスの概念を理解する必要があります。新しいパスを開始するときは、 beginPath()を呼び出す必要があります。 lineWidth 、 lineCap 、 lineJoin設定することで、線分の描画スタイルを設定できます。線分をストロークするとき、 strokeStyleを介して線分の色を設定できます。
Canvas には実線だけでなく、 lineDashOffsetおよびsetLineDash()を使用して破線も描画できます。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。