1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
---
title: CanvasRenderingContext2D.fillStyle
slug: Web/API/CanvasRenderingContext2D/fillStyle
translation_of: Web/API/CanvasRenderingContext2D/fillStyle
---
<div>{{APIRef}}</div>
<p>Canvas 2D API の<code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong> プロパティは、図形の内側を塗りつぶすために使用する色、グラデーション、またはパターンを指定します。デフォルト値は <code>#000</code> (黒色)です。</p>
<div class="note">
<p>輪郭と塗りつぶしのスタイル例については、 <a href="https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial">canvas チュートリアル</a>の <a href="https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" rel="nofollow">スタイルと色を適用する</a> をご覧ください。</p>
</div>
<h2 id="構文">構文</h2>
<pre class="syntaxbox"><em>ctx</em>.fillStyle = <em>color</em>;
<em>ctx</em>.fillStyle = <em>gradient</em>;
<em>ctx</em>.fillStyle = <em>pattern</em>;
</pre>
<h3 id="オプション">オプション</h3>
<dl>
<dt><code>color</code></dt>
<dd><a href="/en-US/docs/Web/CSS">CSS</a> の {{cssxref("<color>")}} として解析される {{domxref("DOMString")}} 。</dd>
<dt><code>gradient</code></dt>
<dd>{{domxref("CanvasGradient")}} オブジェクト (線形または放射状のグラデーション) 。</dd>
<dt><code>pattern</code></dt>
<dd>{{domxref("CanvasPattern")}} オブジェクト (繰り返し画像) 。</dd>
</dl>
<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>例</strong></span></font></p>
<h3 id="図形の塗色を変更する">図形の塗色を変更する</h3>
<p>このサンプルでは青色の塗色を矩形に適用します。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js; highlight:[4]">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);
</pre>
<h4 id="Result">Result</h4>
<p>{{ EmbedLiveSample('Changing_the_fill_color_of_a_shape', 700, 160) }}</p>
<h3 id="ループを使用した複数の塗色の作成">ループを使用した複数の塗色の作成</h3>
<p>この例では2つの <code>for</code> ループでそれぞれが異なる塗色を持つ四角形のグリッドを描画します。 このためには、2つの変数 <code>i</code> と <code>j</code> を四角形ごとに固有となるRGB色を生成するために使用し、また赤色と緑色の値だけを変更するようにします (青色は固定値とします) 。チャンネルを変更することによって全ての種類のパターンを生成することができます。</p>
<div class="hidden">
<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre>
</div>
<pre class="brush: js">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) {
ctx.fillStyle = `rgb(
${Math.floor(255 - 42.5 * i)},
${Math.floor(255 - 42.5 * j)},
0)`;
ctx.fillRect(j * 25, i * 25, 25, 25);
}
}
</pre>
<p>結果はこのようになります:</p>
<p>{{EmbedLiveSample("Creating_multiple_fill_colors_using_loops", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
<h2 id="仕様">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2>
<p>{{Compat("api.CanvasRenderingContext2D.fillStyle")}}</p>
<h3 id="WebKitBlink特有のメモ">WebKit/Blink特有のメモ</h3>
<p>WebKit および Blinkベースのブラウザの場合、このプロパティに加えて、非標準で非推奨のメソッド <code>ctx.setFillColor()</code> が実装されています。</p>
<pre class="brush: js">setFillColor(color, optional alpha);
setFillColor(grayLevel, optional alpha);
setFillColor(r, g, b, a);
setFillColor(c, m, y, k, a);
</pre>
<h2 id="関連情報">関連情報</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></li>
<li>このプロパティを定義しているインターフェース: {{domxref("CanvasRenderingContext2D")}}</li>
<li>このプロパティで使われる値:
<ul>
<li>{{cssxref("<color>")}} CSS data type</li>
<li>{{domxref("CanvasGradient")}} object</li>
<li>{{domxref("CanvasPattern")}} object</li>
</ul>
</li>
</ul>
|
