initial commit

1 files changed, 171 insertions, 0 deletions

diff --git a/files/ja/web/api/canvasrenderingcontext2d/addhitregion/index.html b/files/ja/web/api/canvasrenderingcontext2d/addhitregion/index.html
new file mode 100644
index 0000000000..9321189788
--- /dev/null
+++ b/files/ja/web/api/canvasrenderingcontext2d/addhitregion/index.html
@@ -0,0 +1,171 @@
+---
+title: CanvasRenderingContext2D.addHitRegion()
+slug: Web/API/CanvasRenderingContext2D/addHitRegion
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Experimental
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/addHitRegion
+---
+<div>{{APIRef}} {{obsolete_header}}</div>
+
+<p>{{domxref("CanvasRenderingContext2D")}} の <strong><code>addHitRegion()</code></strong> メソッドは、ビットマップにヒット領域を追加します。</p>
+
+<p>Canvas のヒット領域で、ヒットの検出が簡単になります。これらによってイベントを DOM 要素にルートでき、ユーザーは canvas を見なくても操作できるようになります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">void <em>ctx</em>.addHitRegion(<em>options</em>);
+</pre>
+
+<h3 id="Options" name="Options">オプション</h3>
+
+<p><code>options</code> 引数は任意です。設定する場合は、次のプロパティを含む {{jsxref("Object")}} を指定します。</p>
+
+<dl>
+ <dt><code>path</code></dt>
+ <dd>ヒット領域をあらわす {{domxref("Path2D")}} オブジェクト。指定されない場合は現在のパスが使われます。</dd>
+ <dt><code>fillRule</code></dt>
+ <dd>ある点がヒット領域の中か外かを判断するアルゴリズムです。<br>
+ 取りうる値は次の通りです。
+ <ul>
+  <li><strong><code>nonzero</code></strong>: <a href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding rule</a> を使用します。既定の規則です。</li>
+  <li><code><strong>evenodd</strong></code>: <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd winding rule</a> を使用します。</li>
+ </ul>
+ </dd>
+ <dt><code>id</code></dt>
+ <dd>ヒット領域を後で参照するための ID。 ID はイベントなどで使われます。</dd>
+ <dt><code>parentID</code></dt>
+ <dd>親ヒット領域の ID。 cursor の継承やアクセシビリティツールによるナビゲーションで利用されます。</dd>
+ <dt><code>cursor</code></dt>
+ <dd>この領域にマウスが重なったときに使う {{cssxref("cursor")}} (初期値は <code>inherit</code>)。親ヒット領域があればそこから継承し、なければ、 canvas 要素の cursor から継承します。</dd>
+ <dt><code>control</code></dt>
+ <dd>イベントがルートされる要素 (canvasの子孫)。初期値は <code>null</code>。</dd>
+ <dt><code>label</code></dt>
+ <dd>control がない場合にヒット領域の説明として使われるテキストラベル (アクセシビリティツール向け)。初期値は<code>null</code>。</dd>
+ <dt><code>role</code></dt>
+ <dd>control がない場合にヒット領域の挙動を説明する <a href="/ja/docs/Web/Accessibility/ARIA">ARIA ロール</a> (アクセシビリティツール向け)。初期値は <code>null</code>。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Using_the_addHitRegion_method" name="Using_the_addHitRegion_method"><code>addHitRegion</code> メソッドの使用</h3>
+
+<p>これは、 <code>addHitRegion</code> メソッドを使った簡単な例です。</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;">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+canvas.addEventListener('mousemove', function(event) {
+  if(event.region) {
+    alert("痛っ、僕の目だよ");
+  }
+});
+
+ctx.beginPath();
+ctx.arc(100, 100, 75, 0, 2 * Math.PI);
+ctx.lineWidth = 5;
+ctx.stroke();
+
+// 目
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI);
+ctx.arc(130, 80, 10, 0, 2 * Math.PI);
+ctx.fill();
+ctx.addHitRegion({id: "eyes"});
+
+// Mouth
+ctx.beginPath();
+ctx.arc(100, 110, 50, 0, Math.PI);
+ctx.stroke();
+</pre>
+
+<p>下のコードを編集すると変更が即座に canvas に反映されます。 (もし、スマイリーが不完全な状態で表示されている場合には、現在のブラウザーがヒット領域に対応しているかどうかをブラウザー互換性表を確認してください。設定で有効化する必要があるかもしれません。)</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code" style="height:250px"&gt;
+ctx.beginPath();
+ctx.arc(100, 100, 75, 0, 2 * Math.PI, false);
+ctx.lineWidth = 5;
+ctx.stroke();
+
+// 目
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
+ctx.arc(130, 80, 10, 0, 2 * Math.PI, false);
+ctx.fill();
+ctx.addHitRegion({id: "eyes"});
+
+// 口
+ctx.beginPath();
+ctx.arc(100, 110, 50, 0, Math.PI, false);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+});
+
+canvas.addEventListener("mousemove", function(event){
+  if(event.region) {
+    alert("痛っ、僕の目だよ");
+  }
+});
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 520) }}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>Canvas のヒット領域は、 WHATWG Living Standard から削除されていますが、将来の標準化についての議論は続いています。詳しくは <a href="https://github.com/whatwg/html/issues/3407">https://github.com/whatwg/html/issues/3407</a> を参照してください。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.addHitRegion")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</li>
+</ul>