JS学习--canvas-点击区域 & 支持性

canvas-点击区域 & 支持性

支持

<canvas>...</canvas>标签里的内容被可以对一些不支持canvas的浏览器提供兼容。

<canvas>
	<h2>Shapes</h2>
	<p>A rectangle with a black border.
	In the background is a pink circle.
	Partially overlaying the
		<a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.Partially overlaying the circle is a green
		<a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>and a purple
		<a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
	both of which are semi-opaque, so the full circle can be seen underneath.
	</p>
</canvas>

ARIA规则

Accessible Rich Internet Applications (ARIA) 定义了让Web内容和Web应用更容易被有身体缺陷的人获取的办法。

• role="progressbar" 这个属性告诉浏览器，该元素其实是一个JavaScript实现的进度条组件。
• aria-valuemin和aria-valuemax 属性表明了进度条的最小值和最大值。
• aria-valuenow则描述了当前进度条的状态

<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>

焦点圈

当用键盘控制时，焦点圈是一个能帮我们在页面上快速导航的标记。要在canvas上绘制焦点圈，可以使用drawFocusIfNeeded 属性。

• drawFocusIfNeeded([path，]element): Canvas 2D API 用来给当前路径或特定路径绘制焦点的方法
  • element: 是否需要设置焦点的元素。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var button = document.getElementById("button");
button.focus();
ctx.beginPath();
ctx.rect(10, 10, 30, 30);
ctx.drawFocusIfNeeded(button);

• scrollPathIntoView([path]): Canvas 2D API 将当前或给定的路径滚动到窗口的方法

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillRect(10, 10, 30, 30);
ctx.scrollPathIntoView();