在过去的一年里，在Adobe Web 平台团队的帮助下，Firefox 和其他最近的浏览器实现了一些新的 HTML Canvas 2D 功能。在 MDN 上，Canvas 2D 文档进行了重大更新，以反映当前的画布标准和浏览器实现状态。让我们来看看有哪些新内容，以及如何使用它们来增强您的画布图形和游戏内容。

Path2D 对象

新的 <a href="https://mdn.org.cn/en-US/docs/Web/API/Path2D">Path2D</a> API（从 Firefox 31+ 开始可用）允许您存储路径，这将简化您的画布绘制代码并使其运行得更快。该构造函数提供了三种创建 Path2D 对象的方法

new Path2D();     // empty path object
new Path2D(path); // copy from another path
new Path2D(d);    // path from from SVG path data

第三个版本接受SVG 路径数据来构建，尤其方便。您现在可以重复使用您的 SVG 路径，直接在画布上绘制相同的形状

var p = new Path2D("M10 10 h 80 v 80 h -80 Z");

在构建空路径对象时，您可以使用通常的路径方法，您可能熟悉直接在 <a href="https://mdn.org.cn/en-US/docs/Web/API/CanvasRenderingContext2D">CanvasRenderingContext2D</a> 上下文中使用它们。

// create a circle
var circle = new Path2D();
circle.arc(50, 50, 50, 0, 2 * Math.PI);
// stroke the circle onto the context ctx
ctx.stroke(circle);

要实际将路径绘制到画布上，上下文的几个 API 已更新为接受可选的 Path2D 路径

• <a href="https://mdn.org.cn/en-US/docs/Web/API/CanvasRenderingContext2D.fill">ctx.fill(path)</a>
• <a href="https://mdn.org.cn/en-US/docs/Web/API/CanvasRenderingContext2D.stroke">ctx.stroke(path)</a>
• <a href="https://mdn.org.cn/en-US/docs/Web/API/CanvasRenderingContext2D.clip">ctx.clip(path)</a>
• <a href="https://mdn.org.cn/en-US/docs/Web/API/CanvasRenderingContext2D.isPointInPath">ctx.isPointInPath(path)</a>
• <a href="https://mdn.org.cn/en-US/docs/Web/API/CanvasRenderingContext2D.isPointInStroke">ctx.isPointInStroke(path)</a>

命中区域

从 Firefox 32 开始，增加了对命中区域的实验性支持。您需要将 canvas.hitregions.enabled 首选项切换到 true 才能测试它们。命中区域提供了一种更简单的方法来检测鼠标是否在一个特定区域，而无需依赖手动检查坐标，这对于复杂的形状来说非常困难。命中区域 API 很简单

<a href="https://mdn.org.cn/en-US/docs/Web/API/CanvasRenderingContext2D.addHitRegion">CanvasRenderingContext2D.addHitRegion()</a>

将命中区域添加到画布。

<a href="https://mdn.org.cn/en-US/docs/Web/API/CanvasRenderingContext2D.removeHitRegion">CanvasRenderingContext2D.removeHitRegion()</a>

从画布中删除具有指定 id 的命中区域。

<a href="https://mdn.org.cn/en-US/docs/Web/API/CanvasRenderingContext2D.clearHitRegions">CanvasRenderingContext2D.clearHitRegions()</a>

从画布中删除所有命中区域。

该 addHitRegion 方法，好吧，将命中区域添加到当前路径或 Path2D 路径。该 <a href="https://mdn.org.cn/en-US/docs/Web/API/MouseEvent">MouseEvent</a> 接口已扩展为包含 <a href="https://mdn.org.cn/en-US/docs/Web/API/MouseEvent.region">region</a> 属性，您可以使用它来检查鼠标是否命中了该区域。

查看MDN 上的代码示例，以了解它的实际操作（并确保在 Firefox 和 Chrome 中至少启用标志/首选项）。

焦点环

同样在 Firefox 32 中，<a href="https://mdn.org.cn/en-US/docs/Web/API/CanvasRenderingContext2D.drawFocusIfNeeded">drawFocusIfNeeded(element)</a> 属性已在没有首选项切换的情况下提供。此 API 允许您在画布上绘制焦点环，如果 <canvas></canvas> 元素中的提供的后备元素获得焦点。如果后备元素获得焦点（例如，当在包含画布的页面中进行制表导航时），该元素在画布上的像素表示/形状可以绘制焦点环以指示当前焦点。

CSS/SVG 过滤器暴露给 Canvas

尽管仍在首选项（canvas.filters.enabled）之后，并且还没有在最新的画布规范中（但预计会添加），Firefox 35 获得了对画布渲染上下文的过滤器的支持。语法与CSS 过滤器属性相同。

其他

• 该alpha 上下文属性现已实现（Firefox 30）。不透明的画布可以提高速度！
• 您现在可以向模式添加变换（Firefox 33）。
• <a href="https://mdn.org.cn/en-US/docs/Web/API/CanvasRenderingContext2D.resetTransform">ctx.resetTransform()</a> 已添加到重置变换（Firefox 36）。
• 更多内容即将推出！最新的画布规范包含一些新的 API，它们在浏览器中的实现正在进行中。

文档

如果您想了解更多关于 Canvas 2D 图形的信息，请查看MDN 上的 Canvas 教程，它将引导您完成Canvas API。一个好的书签是大型的 <a href="https://mdn.org.cn/en-US/docs/Web/API/CanvasRenderingContext2D">CanvasRenderingContext2D</a> 接口，您在使用 Canvas 时会经常使用它。