CanvasRenderingContext2D: strokeStyle プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CanvasRenderingContext2D.strokeStyle
はキャンバス 2D API のプロパティで、図形の辺(輪郭)に使用する色、グラデーション、またはパターンを指定します。既定値は #000
(黒色)です。
メモ: 輪郭と塗りつぶしのスタイル例については、キャンバスのチュートリアルの スタイルと色の適用 をご覧ください。
値
以下のいずれかです。
color
-
CSS の
<color>
値として解釈される文字列。 gradient
-
CanvasGradient
オブジェクト(線形または放射グラデーション)。 pattern
-
CanvasPattern
オブジェクト(繰り返し画像)。
例
図形の輪郭色の変更
このサンプルでは、青色の輪郭を矩形に適用します。
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "blue";
ctx.strokeRect(10, 10, 100, 100);
結果
ループを使用した複数の輪郭色の作成
この例では、 2 つの for
ループと arc()
メソッドを使用して、それぞれが異なる輪郭色を持つ円のグリッドを描画します。このためには、 2 つの変数 i
と j
を使用して、円ごとに固有の RGB 色を生成し、また緑色と青色の値だけを変更するようにします(赤色は固定値とします)。
const ctx = document.getElementById("canvas").getContext("2d");
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) {
ctx.strokeStyle = `rgb(
0
${Math.floor(255 - 42.5 * i)}
${Math.floor(255 - 42.5 * j)})`;
ctx.beginPath();
ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
ctx.stroke();
}
}
結果はこのようになります。
仕様書
Specification |
---|
HTML Standard # dom-context-2d-strokestyle-dev |
ブラウザーの互換性
BCD tables only load in the browser
WebKit/Blink 特有のメモ
WebKit および Blink ベースのブラウザーの場合、このプロパティに加えて、非標準で非推奨のメソッド ctx.setStrokeColor()
が実装されています。
setStrokeColor(color);
setStrokeColor(color, alpha);
setStrokeColor(grayLevel);
setStrokeColor(grayLevel, alpha);
setStrokeColor(r, g, b, a);
setStrokeColor(c, m, y, k, a);
関連情報
- このプロパティを定義しているインターフェイス:
CanvasRenderingContext2D
CanvasGradient
CanvasPattern