CanvasRenderingContext2D.strokeRect()
Canvas 2D API の CanvasRenderingContext2D
.strokeRect()
メソッドは、矩形の輪郭を現在の strokeStyle
とその他のコンテキスト設定によって描画します。
このメソッドは、現在のパスを変更せずキャンバスに直接描画するため、 その後の fill()
(en-US) または stroke()
の呼び出しには影響を与えません。
構文
void ctx.strokeRect(x, y, width, height);
strokeRect()
は、座標 (x, y)
を始点とする大きさ (width, height)
の矩形の輪郭を描画します。
パラメーター
x
- 矩形の始点となる x 座標。
y
- 矩形の始点となる y 座標。
width
- 矩形の幅。正の値で右方向、負の値で左方向に描画します。
height
- 矩形の高さ。正の値で下方向、負の値で上方向に描画します。
例
矩形の輪郭
この例では、 strokeRect()
により矩形を緑色の輪郭で描画します。
HTML
<canvas id="canvas"></canvas>
JavaScript
以下に示される矩形の左上角の座標は (20, 10) です。幅は 160 で、高さは 100 です。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'green';
ctx.strokeRect(20, 10, 160, 100);
実行結果
様々なコンテキスト設定の適用
この例では、面取りされた太い線の矩形を影付きで描画します。
HTML
<canvas id="canvas"></canvas>
JavaScript
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);
実行結果
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
HTML Living Standard CanvasRenderingContext2D.strokeRect の定義 |
現行の標準 |
ブラウザー実装状況
BCD tables only load in the browser