From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../canvasrenderingcontext2d/strokerect/index.html | 117 +++++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 files/ja/web/api/canvasrenderingcontext2d/strokerect/index.html (limited to 'files/ja/web/api/canvasrenderingcontext2d/strokerect/index.html') diff --git a/files/ja/web/api/canvasrenderingcontext2d/strokerect/index.html b/files/ja/web/api/canvasrenderingcontext2d/strokerect/index.html new file mode 100644 index 0000000000..72471769c4 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/strokerect/index.html @@ -0,0 +1,117 @@ +--- +title: CanvasRenderingContext2D.strokeRect() +slug: Web/API/CanvasRenderingContext2D/strokeRect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/strokeRect +--- +
{{APIRef}}
+ +

Canvas 2D API の CanvasRenderingContext2D.strokeRect() メソッドは、矩形の輪郭を現在の {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}} とその他のコンテキスト設定によって描画します。

+ +

このメソッドは、現在のパスを変更せずキャンバスに直接描画するため、 その後の {{domxref("CanvasRenderingContext2D.fill()", "fill()")}} または {{domxref("CanvasRenderingContext2D.stroke()", "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);
+
+ +

実行結果

+ +

{{ EmbedLiveSample('矩形の輪郭', 700, 180) }}

+ +

様々なコンテキスト設定の適用

+ +

この例では、面取りされた太い線の矩形を影付きで描画します。

+ +

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);
+ +

実行結果

+ +

{{ EmbedLiveSample('様々なコンテキスト設定の適用', 700, 180) }}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.CanvasRenderingContext2D.strokeRect")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf