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に反映されます（もし、スマイリーが不完全な状態で表示されている場合には、ブラウザー互換性表を確認してください。あなたのブラウザーがヒット領域をサポートしていても、設定で有効化する必要があるかもしれません）。

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

仕様

ブラウザー実装状況

注記

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

関連情報

• CanvasRenderingContext2D.removeHitRegion()
• CanvasRenderingContext2D.clearHitRegions()