path: root/files/ja/web/api/canvasrenderingcontext2d/addhitregion/index.html

---
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>

<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>