CanvasRenderingContext2D.addHitRegion()

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

过时
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() adds a hit region to the bitmap.

Canvas hit regions make hit detection easy. They let you route events to DOM elements, and make it possible for users to explore the canvas without seeing it.

句法

void ctx.addHitRegion(options);

选项

选项 argument is optional. When provided, it is an 对象 which can contain the following properties:

path


									Path2D

object describing the area of the hit region. If not provided, the current path is used.

fillRule

The algorithm by which to determine if a point is inside or outside the hit region.
可能的值：

nonzero ： non-zero winding rule . Default rule.
evenodd ： even-odd winding rule .

id

The ID for this hit region to reference it for later use in events, for example.

parentID

The ID of the parent region for cursor fallback and navigation by accessibility tools.

cursor


									cursor

to use when the mouse is over this region (defaults to


								继承

). Inherits the cursor of the parent hit region, if any, or the canvas element's cursor.

控制

An element (descendant of the canvas) to which events are to be routed. Defaults to


								null

label

A text label for accessibility tools to use as a description of the region, if there is no control. Defaults to


								null

role

An ARIA role for accessibility tools to determine how to represent this region, if there is no control. Defaults to


								null

范例

使用 `addHitRegion` 方法

此范例演示 addHitRegion() 方法。

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById('canvas');
const 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);
ctx.lineWidth = 5;
ctx.stroke();
// Eyes
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();

Edit the code below to see your changes update live in the canvas. (If you don't see the full smiley, check the browser compatibility table to see if your current browser supports hit regions already; you might need to activate a preference.)

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

规范

Canvas hit regions have been removed from the WHATWG Living Standard, although discussions about future standardization are ongoing. See https://github.com/whatwg/html/issues/3407 了解更多信息。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`addHitRegion`	Chrome Yes Disabled Yes Disabled Disabled This feature is behind the `Experimental Web Platform Features` preference. To change preferences in Chrome, visit chrome://flags.	Edge ≤79 Disabled ≤79 Disabled Disabled From version ≤79: this feature is behind the `Experimental Web Platform Features` preference.	Firefox 30 Disabled 30 Disabled Disabled From version 30: this feature is behind the `canvas.hitregions.enabled` preference. To change preferences in Firefox, visit about:config.	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android 30 Disabled 30 Disabled Disabled From version 30: this feature is behind the `canvas.hitregions.enabled` preference. To change preferences in Firefox, visit about:config.	Opera Android No	Safari iOS No	Samsung Internet Android No
`控制`	Chrome Yes Disabled Yes Disabled Disabled This feature is behind the `canvas.hitregions.enabled` preference. To change preferences in Chrome, visit chrome://flags.	Edge ≤79 Disabled ≤79 Disabled Disabled From version ≤79: this feature is behind the `canvas.hitregions.enabled` preference.	Firefox 30 Disabled 30 Disabled Disabled From version 30: this feature is behind the `canvas.hitregions.enabled` preference. To change preferences in Firefox, visit about:config.	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android 30	Opera Android No	Safari iOS No	Samsung Internet Android No
`fillRule`	Chrome Yes Disabled Yes Disabled Disabled This feature is behind the `Experimental Web Platform Features` preference. To change preferences in Chrome, visit chrome://flags.	Edge ≤79 Disabled ≤79 Disabled Disabled From version ≤79: this feature is behind the `Experimental Web Platform Features` preference.	Firefox No	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android No	Opera Android No	Safari iOS No	Samsung Internet Android No
`id`	Chrome Yes Disabled Yes Disabled Disabled This feature is behind the `Experimental Web Platform Features` preference. To change preferences in Chrome, visit chrome://flags.	Edge ≤79 Disabled ≤79 Disabled Disabled From version ≤79: this feature is behind the `Experimental Web Platform Features` preference.	Firefox 30 Disabled 30 Disabled Disabled From version 30: this feature is behind the `canvas.hitregions.enabled` preference. To change preferences in Firefox, visit about:config.	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android 30	Opera Android No	Safari iOS No	Samsung Internet Android No
other hit region options	Chrome No	Edge No	Firefox No	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android No	Opera Android No	Safari iOS No	Samsung Internet Android No
`path` 弃用非标	Chrome Yes Disabled Yes Disabled Disabled This feature is behind the `Experimental Web Platform Features` preference. To change preferences in Chrome, visit chrome://flags.	Edge ≤79 Disabled ≤79 Disabled Disabled From version ≤79: this feature is behind the `Experimental Web Platform Features` preference.	Firefox 39 Disabled 39 Disabled Disabled From version 39: this feature is behind the `canvas.hitregions.enabled` preference. To change preferences in Firefox, visit about:config.	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android 30	Opera Android No	Safari iOS No	Samsung Internet Android No

图例

完整支持
不支持
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
用户必须明确启用此特征。

另请参阅

元数据

最后修改： Feb 24, 2020

在此页

句法

选项

范例

使用 addHitRegion 方法