initial commit

1 files changed, 128 insertions, 0 deletions

diff --git a/files/ja/web/api/canvasrenderingcontext2d/strokestyle/index.html b/files/ja/web/api/canvasrenderingcontext2d/strokestyle/index.html
new file mode 100644
index 0000000000..38b61f3afb
--- /dev/null
+++ b/files/ja/web/api/canvasrenderingcontext2d/strokestyle/index.html
@@ -0,0 +1,128 @@
+---
+title: CanvasRenderingContext2D.strokeStyle
+slug: Web/API/CanvasRenderingContext2D/strokeStyle
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Property
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/strokeStyle
+---
+<div>{{APIRef}}</div>
+
+<p>Canvas 2D API の<code><strong>CanvasRenderingContext2D.strokeStyle</strong></code> プロパティは、図形の輪郭に使用する色、グラデーション、またはパターンを指定します。デフォルト値は <code>#000</code> (黒色)です。</p>
+
+<div class="note">
+<p>輪郭と塗りつぶしのスタイル例については、 <a href="/ja/docs/Web/API/Canvas_API/Tutorial">canvas チュートリアル</a>の <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">スタイルと色を適用する</a> をご覧ください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.strokeStyle = <em>color</em>;
+<em>ctx</em>.strokeStyle = <em>gradient</em>;
+<em>ctx</em>.strokeStyle = <em>pattern</em>;
+</pre>
+
+<h3 id="Options" name="Options">オプション</h3>
+
+<dl>
+ <dt><code>color</code></dt>
+ <dd><a href="/ja/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>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Changing_the_stroke_color_of_a_shape" name="Changing_the_stroke_color_of_a_shape">図形の輪郭色を変更する</h3>
+
+<p>このサンプルでは青色の輪郭を矩形に適用します。</p>
+
+<h4 id="HTML" name="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript" name="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = 'blue';
+ctx.strokeRect(10, 10, 100, 100);
+</pre>
+
+<h4 id="Result" name="Result">実行結果</h4>
+
+<p>{{ EmbedLiveSample('Changing_the_stroke_color_of_a_shape', 700, 160) }}</p>
+
+<h3 id="Creating_multiple_stroke_colors_using_loops" name="Creating_multiple_stroke_colors_using_loops">ループを使用した複数の輪郭色の作成</h3>
+
+<p>この例では2つの <code>for</code> ループと、 {{domxref("CanvasRenderingContext2D.arc", "arc()")}} メソッドを使用して、それぞれが異なる輪郭色を持つ円のグリッドを描画します。 このためには、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">var ctx = document.getElementById('canvas').getContext('2d');
+
+for (let i = 0; i &lt; 6; i++) {
+  for (let j = 0; j &lt; 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();
+  }
+}
+</pre>
+
+<p>結果はこのようになります:</p>
+
+<p>{{EmbedLiveSample("Creating_multiple_stroke_colors_using_loops", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">策定状況</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.strokeStyle")}}</p>
+
+<h3 id="WebKitBlink-specific_note" name="WebKitBlink-specific_note">WebKit/Blink特有のメモ</h3>
+
+<p>WebKit および Blinkベースのブラウザの場合、このプロパティに加えて、非標準で非推奨のメソッド <code>ctx.setStrokeColor()</code> が実装されています。</p>
+
+<pre class="brush: js">setStrokeColor(color, optional alpha);
+setStrokeColor(grayLevel, optional alpha);
+setStrokeColor(r, g, b, a);
+setStrokeColor(c, m, y, k, a);
+</pre>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティを定義しているインターフェース: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+</ul>