JavaScript

 JavaScript's fillStyle is a property that sets the color and pattern of shapes and text drawn on the canvas.

fillStyle [property]

 fillStyleは、絵を描く時に使う色や模様を決めるための設定です。絵の具を選ぶのと似ています。この設定を使うことで、JavaScriptで描く図形や文字の色や模様を自由に変えられます。

 例えば、あなたが JavaScriptを使って、キャンバス(絵を描くための白いスペースのようなもの)上に大きな赤い四角形を描きたい場合、まず fillStyleを使って「私は赤色で塗りたい」とコンピュータに教えてあげます。その後、四角形を描くコマンドを実行すると、その四角形はあなたが選んだ赤色で塗りつぶされます。

 fillStyleを設定する方法は簡単です。まず、JavaScriptで絵を描くための「ブラシ」に当たるものがあり、contextと呼ばれます。この contextに対して、fillStyleプロパティを使って色や模様を設定します。色は、英語での色の名前(例えば "red" や "blue")や、より詳細な色を指定するための #FF0000(これも赤色)のようなコードを使って指定できます。

HTML

<canvas id="myCanvas"></canvas>
<script>
	// ここに JavaScript のコードを書く
</script>

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.fillStyle = 'red'; // ここで色を赤に設定
context.fillRect(20, 20, 150, 100); // 四角形を描く(塗りつぶす)

 上記のコードでは、まずキャンバスを取得し、そのキャンバスで絵を描くための contextを準備します。次に fillStyleを使って、塗りつぶす色を赤に指定しています。最後に fillRectメソッドを使って、実際に四角形を描き、それを赤色で塗りつぶしています。

 fillStyleを使うことで、あなたの創造力の限界はほぼ無限大に広がります。色だけでなく、グラデーションやパターンを使って、さまざまな表現が可能になります。これで、あなたも JavaScriptのキャンバス上で、色と模様を自在に操るアーティストになれるでしょう。