MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

CanvasRenderingContext2D.addHitRegion()

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

Canvas 2D APIのCanvasRenderingContext2D.addHitRegion()メソッドはビットマップにヒット領域を追加します。これにより、ヒット検出が容易になり、イベントをDOM要素にルートでき、ユーザーはcanvasを見なくても操作できるようになります。

構文

void ctx.addHitRegion(options);

Options

options引数は任意です。設定する場合は、次のプロパティを含むObjectを指定します。

path
ヒット領域をあらわすPath2Dオブジェクト。指定されない場合は現在のパスが使われます。
fillRule
利用する塗りの規則(パスの「内側」を定義するルール)(初期値は"nonzero")。
id
ヒット領域を後で参照するためのID。IDはイベントなどで使われます。
parentID
親ヒット領域のID。cursorの継承やアクセシビリティツールによるナビゲーションで利用されます。
cursor
この領域にマウスが重なったときに使うcursor(初期値は"inherit")。親ヒット領域があればそこから継承し、なければ、canvas要素のcursorから継承します。
control
イベントがルートされる要素(canvasの子孫)。初期値はnull
label
controlがない場合にヒット領域の説明として使われるテキストラベル(アクセシビリティツール向け)。初期値はnull
role
controlがない場合にヒット領域の挙動を説明するARIA role(アクセシビリティツール向け)。初期値はnull

addHitRegionメソッドを使う

これは、addHitRegionメソッドを使った簡単な例です。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

canvas.addEventListener("mousemove", function(event){
  if(event.region) {
    alert("痛っ、僕の目だよ");
  }
});

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"});

// mouth
ctx.beginPath();
ctx.arc(100, 110, 50, 0, Math.PI, false);
ctx.stroke();

下のコードを編集すると変更がリアルタイムにcanvasに反映されます(もし、スマイリーが不完全な状態で表示されている場合には、ブラウザー互換性表を確認してください。あなたのブラウザーがヒット領域をサポートしていても、設定で有効化する必要があるかもしれません)。

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:250px">
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();</textarea>
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);

仕様

仕様 策定状況 コメント
WHATWG HTML Living Standard
The definition of 'CanvasRenderingContext2D.addHitRegion' in that specification.
Living Standard Initial definition.

ブラウザー実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有)[1] 30 (30) [2] 未サポート 未サポート 未サポート
id (有)[1] 30 (30) [2] 未サポート 未サポート 未サポート
control (有)[1] 30 (30) [2] 未サポート 未サポート 未サポート
path (有)[1] 未サポート 未サポート 未サポート 未サポート
fillRule (有)[1] 未サポート 未サポート 未サポート 未サポート
その他のヒット領域のオプション 未サポート 未サポート 未サポート 未サポート 未サポート
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 未サポート 未サポート 30.0 (30) 未サポート 未サポート 未サポート
id 未サポート 未サポート 30.0 (30) 未サポート 未サポート 未サポート
control 未サポート 未サポート 30.0 (30) 未サポート 未サポート 未サポート
path 未サポート 未サポート 未サポート 未サポート 未サポート 未サポート
fillRule 未サポート 未サポート 未サポート 未サポート 未サポート 未サポート
その他のヒット領域のオプション 未サポート 未サポート 未サポート 未サポート 未サポート 未サポート

注記

  • [1] この機能はフラグを変更しないと動作しません。有効にするにはExperimentalCanvasFeaturesフラグをtrueに設定してください。
  • [2] この機能は設定を変更しないと動作しません。about:configでcanvas.hitregions.enabledtrueに設定してください。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: fscholz, Taken
 最終更新者: Taken,