{{domxref("CanvasRenderingContext2D")}} の addHitRegion() メソッドは、ビットマップにヒット領域を追加します。
Canvas のヒット領域で、ヒットの検出が簡単になります。これらによってイベントを DOM 要素にルートでき、ユーザーは canvas を見なくても操作できるようになります。
void ctx.addHitRegion(options);
options 引数は任意です。設定する場合は、次のプロパティを含む {{jsxref("Object")}} を指定します。
pathfillRulenonzero: non-zero winding rule を使用します。既定の規則です。evenodd: even-odd winding rule を使用します。idparentIDcursorinherit)。親ヒット領域があればそこから継承し、なければ、 canvas 要素の cursor から継承します。controlnull。labelnull。rolenull。addHitRegion メソッドの使用これは、 addHitRegion メソッドを使った簡単な例です。
<canvas id="canvas"></canvas>
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 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);
{{ EmbedLiveSample('Playable_code', 700, 520) }}
Canvas のヒット領域は、 WHATWG Living Standard から削除されていますが、将来の標準化についての議論は続いています。詳しくは https://github.com/whatwg/html/issues/3407 を参照してください。
{{Compat("api.CanvasRenderingContext2D.addHitRegion")}}