CanvasRenderingContext2D.addHitRegion()

廃止
この機能は廃止されました。まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう。

CanvasRenderingContext2DaddHitRegion() メソッドは、ビットマップにヒット領域を追加します。

Canvas のヒット領域で、ヒットの検出が簡単になります。これらによってイベントを DOM 要素にルートでき、ユーザーは canvas を見なくても操作できるようになります。

構文

void ctx.addHitRegion(options);

オプション

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

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

addHitRegion メソッドの使用

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

HTML

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

JavaScript

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

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

仕様書

Canvas のヒット領域は、 WHATWG Living Standard から削除されていますが、将来の標準化についての議論は続いています。詳しくは https://github.com/whatwg/html/issues/3407 を参照してください。

関連情報