HTML CanvasのstrokeRect()メソッドの使い方を徹底解説
HTML CanvasのstrokeRect()メソッドは、Webページ上に矩形（四角形）の輪郭線を描画するためのメソッドです。<canvas>要素を使うと、JavaScriptを通じてWebページに自由にグラフィックを描くことができます。canvas要素には、描画領域のサイズを指定するためのwidth属性とheight属性が用意されています。
strokeRect()メソッドの構文
strokeRect()メソッドの基本的な構文は以下のとおりです。
context.strokeRect(p, q, width, height);
各パラメータの意味は次の通りです。
- p − 矩形の左上隅のX座標
- q − 矩形の左上隅のY座標
- width − 矩形の幅
- height − 矩形の高さ
strokeRect()メソッドの使用例
それでは、実際にstrokeRect()メソッドを使ってキャンバス上に矩形を描画してみましょう。以下のコードでは、550×400ピクセルのキャンバスを用意し、座標(120, 120)を起点として幅220ピクセル、高さ120ピクセルの矩形の輪郭を描いています。
<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="550" height="400" style="border:2px solid orange;"></canvas>
<script>
var c = document.getElementById("newCanvas");
var ctx = c.getContext("2d");
ctx.strokeRect(120, 120, 220, 120);
</script>
</body>
</html>実行結果
このコードを実行すると、オレンジ色の枠線で囲まれたキャンバスの中に、指定した位置とサイズの矩形の輪郭線が表示されます。
まとめ
strokeRect()メソッドは、塗りつぶしなしの輪郭線のみの矩形を簡単に描画できる便利なメソッドです。塗りつぶした矩形を描きたい場合はfillRect()メソッドを、線の色や太さを変更したい場合はstrokeStyleプロパティやlineWidthプロパティと組み合わせて使うことで、より表現力豊かなグラフィックを作成できます。
-
HTML DOM getNamedItem()メソッドとは？使い方をサンプルコード付きで解説
HTML DOMのgetNamedItem()メソッドは、NamedNodeMapオブジェクトの中から、指定した名前に一致する属性ノードを取得するために使用されます。このメソッドを呼び出す際は、必ずattributesプロパティに対して実行する必要があります。attributesプロパティはすべての属性のコレクション（NamedNodeMap）を返すため、その中からgetNamedItem()メソッドを使って特定の属性だけを取り出すことができるのです。 構文 getNamedItem()メソッドの構文は以下の通りです。 namednodemap.getNamedItem(nodename) こ
-
HTML DOMのgetElementsByTagName()メソッドとは？使い方を徹底解説
HTML DOM getElementsByTagName()メソッドとはHTML DOM の getElementsByTagName() メソッドは、ドキュメント内から指定したタグ名を持つすべての要素のコレクションを取得するためのメソッドです。該当する要素は NodeList オブジェクトとして返され、インデックス番号を指定することで、コレクション内の任意の要素にアクセスできます。また、このメソッドが返す HTMLCollection は常に DOM ツリーと同期しています。そのため、要素を追加・削除した後も、getElementsByTagName() を何度も呼び直すことなく、最新の状