JavaScriptでのcanvasの線の色の変更

では、輪郭線（ストローク）と塗りつぶし（フィル）の色を変更する方法を学びましょう。 そのためには次のプロパティがあります: プロパティ strokeStyle は輪郭線の色を設定し、 プロパティ fillStyle は塗りつぶしの色を設定します。 色は通常の CSS フォーマットで設定します。

例

rect を使って輪郭線を描き、赤色に塗ってみましょう:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();

Результат:

例

rect を使って四角形を描き、緑色に塗りつぶしてみましょう:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();

Результат:

注意点

重要: strokeStyle または fillStyle を設定すると、 新しい値はそれ以降に描画されるすべての図形に適用されます。 異なる色が必要な図形ごとに、fillStyle または strokeStyle の値を上書きする必要があります。

実践問題