CanvasRenderingContext2D.strokeRect()
CanvasRenderingContext2D.strokeRect()
はキャンバス 2D API のメソッドで、矩形の輪郭を現在の strokeStyle
とその他のコンテキスト設定によって描画します。
このメソッドは、現在のパスを変更せずキャンバスに直接描画するため、 その後の fill()
(en-US) または stroke()
の呼び出しには影響を与えません。
構文
js
void ctx.strokeRect(x, y, width, height);
strokeRect()
は、座標 (x, y)
を始点とし、大きさが (width, height)
の矩形の輪郭を描画します。
引数
x
-
矩形の始点となる x 座標。
y
-
矩形の始点となる y 座標。
width
-
矩形の幅。正の値で右方向、負の値で左方向に描画します。
height
-
矩形の高さ。正の値で下方向、負の値で上方向に描画します。
例
単純な矩形の輪郭
この例では、 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 = "#d53";
ctx.shadowBlur = 20;
ctx.lineJoin = "bevel";
ctx.lineWidth = 15;
ctx.strokeStyle = "#38f";
ctx.strokeRect(30, 30, 160, 90);
結果
仕様書
Specification |
---|
HTML Standard # dom-context-2d-strokerect-dev |
ブラウザーの互換性
BCD tables only load in the browser