initial commit

1 files changed, 129 insertions, 0 deletions

diff --git a/files/ja/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/ja/web/api/canvasrenderingcontext2d/fillstyle/index.html
new file mode 100644
index 0000000000..e12cd42f3b
--- /dev/null
+++ b/files/ja/web/api/canvasrenderingcontext2d/fillstyle/index.html
@@ -0,0 +1,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("&lt;color&gt;")}} として解析される {{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">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</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">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+for (let i = 0; i &lt; 6; i++) {
+  for (let j = 0; j &lt; 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("&lt;color&gt;")}} CSS data type</li>
+   <li>{{domxref("CanvasGradient")}} object</li>
+   <li>{{domxref("CanvasPattern")}} object</li>
+  </ul>
+ </li>
+</ul>