CanvasRenderingContext2D: strokeRect() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
CanvasRenderingContext2D.strokeRect() はキャンバス 2D API のメソッドで、矩形の輪郭を現在の strokeStyle とその他のコンテキスト設定によって描画します。
このメソッドは、現在のパスを変更せずキャンバスに直接描画するため、 その後の fill() または stroke() の呼び出しには影響を与えません。
構文
js
strokeRect(x, y, width, height)
strokeRect() は、座標 (x, y) を始点とし、大きさが (width, height) の矩形の輪郭を描画します。
引数
返値
なし (undefined)。
例
単純な矩形の輪郭
この例では、 strokeRect() により矩形を緑色の輪郭で描画します。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
以下に示される矩形の左上角の座標は (20, 10) です。幅は 160 で、高さは 100 です。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "green";
ctx.strokeRect(20, 10, 160, 100);
結果
様々なコンテキスト設定の適用
この例では、面取りされた太い線の矩形を影付きで描画します。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.shadowColor = "#dd5533";
ctx.shadowBlur = 20;
ctx.lineJoin = "bevel";
ctx.lineWidth = 15;
ctx.strokeStyle = "#3388ff";
ctx.strokeRect(30, 30, 160, 90);
結果
仕様書
| 仕様書 |
|---|
| HTML # dom-context-2d-strokerect-dev |