CanvasRenderingContext2D.addHitRegion() - Web API 接口参考 编辑

已废弃
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

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的变化（如果你没有看到全部的效果，请查看浏览器兼容性列表。如果你当前的浏览器支持点击区域，你需要激活偏好设置） 。

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

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

规范描述

Specification	Status	Comment
HTML Living Standard CanvasRenderingContext2D.addHitRegion	Living Standard	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!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)[1]	30 (30) [2]	未实现	未实现	未实现
id	(Yes)[1]	30 (30) [2]	未实现	未实现	未实现
control	(Yes)[1]	30 (30) [2]	未实现	未实现	未实现
path	(Yes)[1]	39 (39) [2]	未实现	未实现	未实现
fillRule	(Yes)[1]	未实现	未实现	未实现	未实现
other hit region options	未实现	未实现	未实现	未实现	未实现

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	未实现	未实现	30.0 (30)	未实现	未实现	未实现
id	未实现	未实现	30.0 (30)	未实现	未实现	未实现
control	未实现	未实现	30.0 (30)	未实现	未实现	未实现
path	未实现	未实现	39.0 (39)	未实现	未实现	未实现
fillRule	未实现	未实现	未实现	未实现	未实现	未实现
other hit region options	未实现	未实现	未实现	未实现	未实现	未实现

兼容性注解

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

参见

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