We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

仕様

仕様 策定状況 コメント
HTML Living Standard
CanvasRenderingContext2D.addHitRegion の定義
現行の標準 Initial definition.

ブラウザー実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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,