HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLキャンバスのstroke()メソッドとは？使い方とサンプルコードを解説

HTMLキャンバスのstroke()メソッドは、定義されたパス（軌跡）を実際に描画するためのメソッドです。パスそのものはmoveTo()やlineTo()などのメソッドで定義しますが、この段階ではまだ画面には表示されません。stroke()を呼び出すことで、はじめて線として描き出されます。

<canvas>要素の基本

<canvas>要素を使うと、JavaScriptを通じてWebページ上に図形やグラフィックを自由に描画できます。canvas要素には、描画領域のサイズを指定する2つの属性があります。

  • width：キャンバスの幅を指定
  • height：キャンバスの高さを指定

stroke()メソッドの構文

構文は非常にシンプルで、以下のように記述します。

ctx.stroke()

引数は不要で、現在設定されているパスに対して、strokeStyleで指定した色・スタイルで線を描画します。

stroke()メソッドの使用例

それでは、stroke()メソッドを使った具体的な実装例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="450" height="350" style="border:2px solid red;">
</canvas>
<script>
    var c = document.getElementById("newCanvas");
    var ctx = c.getContext("2d");
    // 1本目：青い縦線を描画
    ctx.beginPath();
    ctx.moveTo(100, 200);
    ctx.lineTo(100, 100);
    ctx.strokeStyle = "blue";
    ctx.stroke();
    // 2本目：オレンジ色の三角形を描画
    ctx.beginPath();
    ctx.moveTo(30, 30);
    ctx.lineTo(20, 100);
    ctx.lineTo(70, 100);
    ctx.strokeStyle = "orange";
    ctx.stroke();
</script>
</body>
</html>

コードの解説

このサンプルでは、以下の手順で図形を描いています。

  1. getContext("2d")で2D描画コンテキストを取得します。
  2. beginPath()で新しいパスを開始し、moveTo()で起点を設定します。
  3. lineTo()で線の終点を指定し、パスを定義します。
  4. strokeStyleで線の色を設定し、stroke()で実際に描画します。

1つ目の例では座標(100, 200)から(100, 100)へ向かう青い縦線が、2つ目の例では3つの座標を結んだオレンジ色の三角形（塗りつぶしなしの輪郭線）がそれぞれ描画されます。

実行結果

上記のコードを実行すると、赤い枠線のキャンバス内に青い直線と、オレンジ色の三角形の輪郭が表示されます。

HTMLキャンバスのstroke()メソッドとは？使い方とサンプルコードを解説

まとめ

stroke()メソッドは、moveTo()やlineTo()で定義したパスを可視化するために必須のメソッドです。fill()メソッドと組み合わせれば、輪郭線と塗りつぶしを併用した表現も可能になるため、キャンバス描画の基本としてしっかり押さえておきましょう。

  1. HTML DOM Canvasオブジェクトとは？プロパティ・メソッドと図形描画の実例を解説

    HTML DOM Canvasオブジェクトは、HTML5で導入された<canvas>要素に関連付けられたオブジェクトです。<canvas>タグは、JavaScriptを使ってグラフィックを描画するためのもので、描画領域（コンテナ）として機能します。Canvas上では、線や円、矩形など、さまざまな図形を自由に描くことができます。 Canvasオブジェクトの主なプロパティ Canvasオブジェクトには、以下のようなプロパティが用意されています。 プロパティ説明 fillStyle図形の塗りつぶしに使用する色・グラデーション・パターンを設定または取得します。 st

  2. HTML Canvasの基本を解説!図形や曲線を描画する方法

    Webページ上にキャンバスを描画するには、HTML5の<canvas>要素を使用します。<canvas>要素を使うと、JavaScriptを通じてグラフィックスを自由に描画できます。線分、長方形、ベジェ曲線など、さまざまな図形を描くことが可能です。canvas要素の基本的な設定すべてのcanvas要素には、キャンバスのサイズを指定するためのheight(高さ)とwidth(幅)という2つの属性があります。さらに、JavaScriptからcanvas要素を操作できるように、id属性を設定する必要があります。以下のコード例をご覧ください。<canvas id = ne