CanvasRenderingContext2D.addHitRegion()

CanvasRenderingContext2D.addHitRegion() 是 Canvas 2D API 给位图添加点击区域的方法。 它允许你很容易地实现一个点击区域， 让你触发 DOM 元素的事件， 去探索看不见的画布。

语法

void ctx.addHitRegion(options);

选项

options 参数是可选的。 当赋值时， Object 包含以下属性：

path

Path2D 对象， 描述点击区的区域范围。 如果不给此属性赋值， 则会使用当前的路径。

fillRule

遵循的填充规则（默认是“nonzero”）。

id

点击区的ID，在事件中可以引用此ID，就像示例中那样。

parentID

父区域的ID，为了光标回退或者辅助工具导航 。

cursor

鼠标移动到点击区时的 cursor  （默认是 "inherit"）。 继承父点击区域的光标，或者canvas元素的光标。

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("ouch, my eye :(");
  }
});

ctx.beginPath();
ctx.arc(100, 100, 75, 0, 2 * Math.PI, false);
ctx.lineWidth = 5;
ctx.stroke();

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

// eyes
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();</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("ouch, my eye :(");
  }
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

规范描述

浏览器兼容性

兼容性注解

• [1] 此特性需要一个特性标志。 设置 ExperimentalCanvasFeatures 标志为 true 进行启用。
• [2] 此特性需要一个特性偏好设置。在 about:config里面，设置 canvas.hitregions.enabled 为true。

参见

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