[canvas系列]addHitRegion(options)讲解

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀.由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变.

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();// eyesctx.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"});// mouthctx.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();// eyesctx.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"});// mouthctx.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 WHATWG HTML Living Standard
CanvasRenderingContext2D.addHitRegion Living Standard Initial definition.

浏览器兼容性

• 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 未实现 未实现 未实现 未实现 未实现 未实现