recursal/MDN huggingface dataset:
Notification：close 事件
=====================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`Notification` 接口上的 **`close`** 事件在一个 `Notification` 被关闭时触发。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或者设置事件处理器属性。


```js
addEventListener("close", (event) => {});

onclose = (event) => {};
```

事件类型
----

一个通用 `Event`。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Notification`
* 使用 Notification API
Notification：requestPermission() 静态方法
=====================================

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**备注：** Safari 仍然使用回调函数语法来请求权限。使用 Notifications API 的例子说明了如何检测需使用回调函数语法的情况并以适当的方式运行代码。

`Notification` 接口的 **`requestPermission()`** 静态方法向用户为当前来源请求显示通知的权限。

语法
--


```js
// 最新规范已将此方法更新为基于 promise 的语法，其工作方式如下：
Notification.requestPermission()

// 以前，语法是基于一个简单的回调函数；此版本现已弃用：
Notification.requestPermission(callback)
```

### 参数

`callback` 可选 
已弃用

一个可选的参数为权限请求的结果的回调函数。此参数已废弃，请使用 Promise 的语法。

### 返回值

一个 `Promise`，会兑现为一个表示用户选择的权限的字符串。该字符串的可能值为：

* `granted`
* `denied`
* `default`
示例
--

假设如下基本的 HTML：


```html
<button onclick="notifyMe()">通知我！</button>
```


可以按如下方式发送通知——这里我们提供了一组相当详细和完整的代码，如果你想首先检查是否支持通知，然后检查是否已授予当前域名发送通知的权限，然后，如果必需的话，在发送通知前请求权限。


```js
function notifyMe() {
  if (!("Notification" in window)) {
    // 检查浏览器是否支持桌面通知
    alert("此浏览器不支持桌面通知");
  } else if (Notification.permission === "granted") {
    // 检查通知权限是否已经被授予；如果是的话，创建一条通知
    const notification = new Notification("你好呀！");
    // …
  } else if (Notification.permission !== "denied") {
    // 我们需要请求用户的许可
    Notification.requestPermission().then((permission) => {
      // 如果用户同意，让我们创建一个通知
      if (permission === "granted") {
        const notification = new Notification("你好呀！");
        // …
      }
    });
  }

  // 最后，如果用户拒绝了通知，而你想要尊重他们，就没有必要再打扰他们了。
}
```


我们不再在此页面上展示实时示例，因为 Chrome 和 Firefox 不再允许从跨源 `<iframe>` 请求通知权限，并且其他浏览器也将效仿。要查看实际示例，请查看我们的待办事项列表示例（参见实时运行用例）。

**备注：** 在上面的示例中，我们生成通知以响应用户手势（单击按钮）。这不仅仅是最佳实践——你不应该向用户滥发他们不同意的通知——而且未来的浏览器将明确禁止未响应用户手势而触发的通知。例如，Firefox 已经从版本 72 开始这样做了。

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-requestpermission |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Notifications API
Notification：image 属性
=====================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`Notification` 接口的 `image` 只读属性包含要作为通知的一部分显示的图像的 URL，在 `Notification()` 构造函数的 `image` 选项中指定。

值
-

一个字符串。

规范
--

| Specification |
| --- |
| Notifications API Standard # image-resource |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Notification API
Notification：close() 方法
=======================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`Notification` 接口的 `close()` 的方法用于关闭或移除一个先前显示的通知。

**备注：** 此 API 不应仅用于在固定延迟后从屏幕上移除通知，因为此方法还将从任何通知托盘中删除该通知，阻止用户在最初显示后与其交互。此 API 的有效用途是移除不再相关的通知（例如，如果是消息应用程序，则用户已经阅读了网页上的通知；或者音乐应用程序中已经在播放下一首歌曲）。

语法
--


```js
close()
```

### 参数

无（`undefined`）。

### 返回值

无。

示例
--

在下面的代码片段中，我们有一个简单的函数，当调用时创建一个 `options` 对象，然后是一个新的通知。在函数的最后，它在 `addEventListener()` 函数中调用 `close()` 以在网页上阅读相关内容后移除该通知。


```js
function spawnNotification(theBody, theIcon, theTitle) {
  const options = {
    body: theBody,
    icon: theIcon,
  };

  const n = new Notification(theTitle, options);
  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
      // 该选项卡已变得可见，因此清除了现在过时的通知。
      n.close();
    }
  });
}
```

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-close |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Notifications API
Notification：show 事件
====================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`Notification` 接口上的 **`show`** 事件在一个 `Notification` 显示时触发。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或者设置事件处理器属性。


```js
addEventListener("show", (event) => {});

onshow = (event) => {};
```

事件类型
----

一个通用 `Event`。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Notification`
* 使用 Notification API
Notification：title 属性
=====================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`Notification` 接口的 **`title`** 只读属性指示通知的标题。此属性通过 `Notification()` 构造函数的 `title` 参数指定。

值
-

一个字符串。

示例
--


```js
function spawnNotification(theBody, theIcon, theTitle) {
  const options = {
    body: theBody,
    icon: theIcon,
  };

  const n = new Notification(theTitle, options);

  console.log(n.title);
}
```

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-title |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Notification API
Notification：lang 属性
====================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`Notification` 接口的 **`lang`** 只读属性指示通知中使用的语言，在 {domxref("Notification.Notification","Notification()")}} 构造函数的 `lang` 参数中指定。

语言本身是根据 RFC 5646: Tags for Identifying Languages（即 BCP 47）使用表示语言标签的字符串指定的。请参阅 Sitepoint ISO 2 字母语言代码 页面以获取简单参考。

值
-

一个指定语言标签的字符串。

示例
--

以下代码段会触发一条通知；首先创建一个简单的 `options` 对象，然后使用 `Notification()` 构造函数触发通知。


```js
const options = {
  body: "你提交的代码收到了 3 条新的审阅意见。",
  lang: "zh-Hans-CN",
};

const n = new Notification("新的评论活动", options);

console.log(n.lang); // "zh-Hans-CN"
```

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-lang |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Notification API
Notification：requireInteraction 属性
==================================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`Notification` 接口的 **`requireInteraction`** 只读属性返回一个布尔值，指示在用户点击或关闭通知前，通知应该保持活动状态，而不是自动关闭。

**备注：** 可以在创建通知时通过将 `Notification.Notification()` 构造方法的 `requireInteraction` 选项设置为 `true` 来进行设置。

值
-

一个布尔值。

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-requireinteraction |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Notification API
Notification：tag 属性
===================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`Notification` 接口的 **`tag`** 只读属性表示通知的识别标签。此属性通过 `Notification()` 构造函数的 `tag` 选项中指定。

通知的标签的构想是多个通知可以共享同一个标签，将它们链接在一起。然后可以通过编程方式将一个通知替换为另一个通知，以避免用户的屏幕被大量类似的通知填满。

值
-

一个字符串。

示例
--

我们的使用通知 API 文章有一个很好的标签属性的使用示例。

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-tag |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Notification API
Notification：dir 属性
===================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`Notification` 接口的 `dir` 只读属性指示通知的文本方向，此文本方向在 `Notification()` 构造函数的 `dir` 选项中指定。

值
-

一个表示文本方向的字符串。可能的取值为：

`auto`

继承浏览器的语言设置里指定的方向（默认值）。

`ltr`

从左到右。

`rtl`

从右到左。


**备注：** 大多数浏览器似乎都忽略了明确的 ltr 和 rtl 设置，而是使用浏览器的通用设置。

示例
--

以下代码段会触发通知；首先创建一个简单的 `options` 对象，然后使用 `Notification()` 构造函数触发通知。


```js
const options = {
  body: "你提交的代码收到了 3 条新的审阅意见。",
  dir: "rtl",
};

const n = new Notification("新评论活动", options);

console.log(n.dir); // "rtl"
```

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-dir |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Notification API
Notification：Notification() 构造函数
================================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**`Notification()`** 构造函数创建一个新的代表用户通知的 `Notification` 对象实例。

语法
--


```js
new Notification(title)
new Notification(title, options)
```

### 参数

`title`

定义一个通知的标题，它将显示在通知窗口的顶部。

`options` 可选

一个包含要应用于通知的任何自定义设置的选项对象。可能的选项有：

`dir`

显示通知的方向。它默认为 `auto`，即只采用浏览器的语言设置行为，但你可以通过设置 `ltr` 和 `rtl` 的值来覆盖该行为（尽管大多数浏览器似乎忽略这些设置）。

`lang`

指定通知的语言，根据RFC 5646: 识别语言的标签（也被称为 BCP47）使用表示语言标签的字符串指定。请参阅 Sitepoint ISO 2 字母语言代码页面以获取简单参考。

`badge`

一个包含图像 URL 的字符串，用于在没有足够空间显示通知本身时表示通知。

`body`

一个表示通知正文的字符串，显示在标题下方。

`tag`

一个表示通知的识别标签的字符串，默认值是一个空字符串。

`icon`

一个包含要在通知中显示的图标的 URL 的字符串。

`image`

一个包含要在通知中显示的图像的 URL 的字符串。

`data`

任意你想要与通知关联的数据。它可以是任何数据类型。

`vibrate`

设备振动硬件随通知一起发出的振动模式。当该值被指定时，`silent` 参数不得设置为 `true`。

`renotify`

一个布尔值，指定在新通知替换旧通知后是否应通知用户。默认值为 `false`，这意味着他们不会收到通知。如果该值被指定为 `true`，那么必须同时设置 `tag` 参数。

`requireInteraction`

指示通知应保持活动状态，直到用户单击或关闭它，而不是自动关闭。默认值为 `false`。

`actions`

要在通知中显示的一系列操作的数组。数组中的每个元素都是一个具有以下成员的对象：

* `action`：一个标识要在通知上显示的用户操作的字符串。
* `title`：一个包含要向用户显示的操作文本的字符串。
* `icon`：一个包含与操作一起显示的图标 URL 的字符串。

使用 `notificationclick` (en-US) 事件中的 `event.action` 构建适当的响应。

`silent`

一个布尔值，指定通知是否静音（不发出声音或振动），无论设备设置如何。默认值为 `false`，这意味着它不会保持静音。如果被设置为 `true`，那么不能同时传递 `vibrate` 参数。


### 异常

`TypeError`

如果满足以下条件之一，则抛出该异常：

* `options.silent` 是 `true` 且同时指定了 `options.vibrate`。
* `options.renotify` 是 `true` 但是 `options.tag` 为空值。

示例
--

在我们的 `Emogotchi` 演示（查看源代码）中，当我们想要触发通知时，我们运行 `spawnNotification()` 函数。该函数传递参数来指定我们想要的正文、图标和标题，然后它创建必要的 `options` 对象并使用 `Notification()` 构造函数触发通知。


```js
function spawnNotification(body, icon, title) {
  const notification = new Notification(title, { body, icon });
}
```

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-notification |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### Chrome 浏览器备注

从 Chrome 49 开始，通知在无痕模式下不起作用。

Android 版 Chrome 会在调用 `Notification` 构造函数时抛出 `TypeError`。它仅支持从 Service Worker 中创建通知。有关更多详细信息，请参阅 Chromium 问题跟踪器。

参见
--

* 使用 Notification API
Notification：click 事件
=====================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`Notification` 接口的 **`click`** 事件在用户点击显示的 `Notification` 时候触发。

默认的事件行为是将焦点移动到与通知相关浏览上下文的视口上。如果你不想要默认行为，请在事件对象上调用 `preventDefault()`。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或者设置事件处理器属性。


```js
addEventListener("click", (event) => {});

onclick = (event) => {};
```

事件类型
----

一个通用 `Event`。

示例
--

在下面这个例子中，我们使用 onclick 处理器来监听点击通知的事件，并在新窗口（通过包含一个参数 `'_blank'`）打开一个页面：


```js
notification.onclick = (event) => {
  event.preventDefault(); // 阻止浏览器聚焦于 Notification 的标签页
  window.open("http://www.mozilla.org", "\_blank");
};
```

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-onclick |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Notification`
* 使用 Notification API
Notification：icon 属性
====================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`Notification` 接口的 **`icon`** 只读属性包含将作为通知的一部分显示的图标的 URL，在 `Notification()` 构造函数的 `icon` 选项中指定。

值
-

一个字符串。

示例
--

在我们的 To-do list app（查看实时运行示例），我们使用 `Notification()` 构造函数触发通知，并将参数传递给它以指定我们想要的 body、icon 和 title。


```js
const notification = new Notification("To do list", {
  body: text,
  icon: img,
});
```

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-icon |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Notification API
Notification：error 事件
=====================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`Notification` 接口的 **`error`** 事件在 `Notification` 调用出错时候触发（在许多情况下，错误会阻止通知的显示）。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或者设置事件处理器属性。


```js
addEventListener("error", (event) => {});

onerror = (event) => {};
```

事件类型
----

一个通用 `Event`。

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-onerror |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Notification`
* 使用 Notification API
Notification：body 属性
====================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`Notification` 接口的 **`body`** 只读属性指示通知的正文字符串，该字符串在 `Notification()` 构造函数的 `body` 选项中指定。

值
-

一个字符串。

示例
--


```js
function spawnNotification(theBody, theIcon, theTitle) {
  const options = {
    body: theBody,
    icon: theIcon,
  };
  const n = new Notification(theTitle, options);

  console.log(n.body);
}
```

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-body |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Notification API
Notification：maxActions 静态属性
============================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`Notification` 接口的 **`maxActions`** 属性返回设备和用户代理支持的最大操作数量。实际上，这是会被用户代理遵守的 `Notification.actions` 数组中的元素的最大数量。

值
-

一个表示用户代理和设备可以向用户呈现的通知操作的最大数量的整数。

示例
--

以下代码片段打印了支持的操作的最大数量。


```js
const maxActions = Notification.maxActions;
console.log(`此设备最多可以对每个通知显示 ${maxActions} 个操作。`);
```

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-maxactions |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Notification API
* `Notification.actions`
Notification：permission 静态属性
============================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`Notification` 接口的只读属性 `permission` 表明当前用户是否授予当前来源（origin）显示 web 通知的权限。

值
-

一个表示当前权限的字符串。其值可以是：

`granted`

用户已经明确地授予了当前来源显示系统通知的权限。

`denied`

用户已经明确地拒绝了当前来源显示系统通知的权限。

`default`

用户是否授予当前来源显示系统通知的权限的决定是未知的；在这种情况下，应用的行为与该值为 `denied` 的情况相同。

示例
--

如果你想首先检查是否支持通知，然后检查是否已授予当前来源发送通知的权限，然后在发送通知之前请求权限（如果需要），则可以使用以下代码段。


```js
function notifyMe() {
  if (!("Notification" in window)) {
    // 检查浏览器是否支持桌面通知
    alert("此浏览器不支持桌面通知");
  } else if (Notification.permission === "granted") {
    // 检查通知权限是否已经被授予；如果是的话，创建一条通知
    const notification = new Notification("你好呀！");
    // …
  } else if (Notification.permission !== "denied") {
    // 我们需要请求用户的许可
    Notification.requestPermission().then((permission) => {
      // 如果用户同意，让我们创建一个通知
      if (permission === "granted") {
        const notification = new Notification("你好呀！");
        // …
      }
    });
  }
  // 最后，如果用户拒绝了通知，而你想要尊重他们，就没有必要再打扰他们了
}
```

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-permission |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Notification API
* 使用 Notification API
* Permission API (en-US)
* 使用 Permission API
Notification：renotify 属性
========================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`Notification` 接口的 **`renotify`** 只读属性指定在新通知替换旧通知后是否应当通知用户，在 `Notification()` 构造函数的 `renotify` 选项中指定。

值
-

一个布尔值。默认值为 `false`；设为 `true` 将会重新通知用户。

示例
--

以下代码片段用于在一个通知被替换以后触发重新向用户发送通知；它创建一个简单的 `options` 对象，然后调用 `Notification()` 构造函数触发通知。


```js
const options = {
  body: "你提交的代码收到了 3 条新的审阅意见。",
  renotify: true,
};

const n = new Notification("新评论活动", options);

console.log(n.renotify); // "true"
```

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-renotify |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Notification API
Notification：timestamp 属性
=========================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`Notification` 接口的 **`timestamp`** 只读属性返回一个数字。此属性通过  `Notification()` 构造函数的 `timestamp` 选项指定。

通知的时间戳可以表示创建通知的事件的时间（自 1970 年 1 月 1 日 00:00:00 UTC 时间以来的毫秒数），或者它可以是你希望与通知相关联的任意时间戳。例如，一个即将召开的会议的时间戳可以设置在未来，而一条错过的消息的时间戳可以设置在过去。

值
-

一个表示时间戳的数字，以 Unix 时间形式按毫秒为单位给出。

示例
--

以下代码片段会触发一条通知；首先创建一个简单的 `options` 对象，然后使用 `Notification()` 构造函数触发通知。


```js
const dts = Math.floor(Date.now());

const options = {
  body: "你提交的代码收到了 3 条新的审阅意见。",
  timestamp: dts,
};

const n = new Notification("新的评论活动", options);

console.log(n.timestamp); // 输出 timestamp
```

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-timestamp |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Notification API
Path2D.addPath()
================

**`Path2D.addPath()`** 是 Canvas 2D API 根据指定路径变量添加路径的方法。

语法
--
```

void path.addPath(path [, transform]);
```

### 参数

`path`

需要添加的 `Path2D` 路径。

`transform` 可选

`DOMMatrix` 作为新增路径的变换矩阵。

示例
--

### 在已有的路径上添加一条路径

这是一段使用 `addPath` 方法的简单的代码片段。

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Create first path and add a rectangle
let p1 = new Path2D();
p1.rect(0, 0, 100, 150);

// Create second path and add a rectangle
let p2 = new Path2D();
p2.rect(0, 0, 100, 75);

// Create transformation matrix that moves 200 points to the right
let m = new DOMMatrix();
m.a = 1;
m.b = 0;
m.c = 0;
m.d = 1;
m.e = 200;
m.f = 0;

// Add second path to the first path
p1.addPath(p2, m);

// Draw the first path
ctx.fill(p1);
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # dom-path2d-addpath-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 接口定义，`Path2D`
Path2D()
========

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`Path2D()`** 构造函数返回一个新的 `Path2D` 对象的实例，可以选择另一条路径作为参数（创建一个拷贝），或者选择 SVG path 数据构成的字符串。

语法
--
```

new Path2D();
new Path2D(path);
new Path2D(d);
```

### 参数

`path` 可选

当调用另一个 `Path2D` 对象时，会创建一个 `path` 变量的拷贝。

`d` 可选

当调用 SVG path 数据构成的字符串时，会根据描述创建一个新的路径。

示例
--

### 创建和拷贝路径

这是一段简单的代码片段，创建和拷贝 `Path2D` 路径。
```

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



```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let path1 = new Path2D();
path1.rect(10, 10, 100, 100);

let path2 = new Path2D(path1);
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 \* Math.PI);

ctx.stroke(path2);
```

### 使用 SVG 路径

这是一段简单的代码片段，使用 SVG path data 创建一个 `Path2D` 路径。路径将会移动到点 (`M10 10`) ，然后向右侧水平移动 80 个点 (`h 80`)，然后向下 80 个点 (`v 80`)，然后向左 80 个点 (`h -80`)，最后回到起始点 (`z`)。
```

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



```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let p = new Path2D("M10 10 h 80 v 80 h -80 Z");
ctx.fill(p);
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-path2d-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Path2D`, 这个构造函数属于此接口。
HTMLVideoElement: leavepictureinpicture event
=============================================

**`leavepictureinpicture`** 事件会在 `HTMLVideoElement` 成功离开画中画模式时触发。

此事件不可取消，也不会冒泡。

语法
--

在 `addEventListener()`等方法中使用事件方法名，或者设置事件处理器属性。


```js
addEventListener("leavepictureinpicture", (event) => {});

onleavepictureinpicture = (event) => {};
```

事件类型
----

`PictureInPictureEvent` (en-US) 继承自 `Event`。

Event

PictureInPictureEvent

(en-US)事件属性
----

继承自 `Event` 的 `PictureInPictureEvent` (en-US)。

示例
--

这些示例为 `leavepictureinpicture` 事件增加事件侦听器，然后在该事件处理程序对事件触发做出反应时发布消息。

使用 `addEventListener()`:


```js
const video = document.querySelector('#video');
const button = document.querySelector('#button');

function onExitPip() {
  console.log("Picture-in-Picture mode deactivated!");
}

video.addEventListener("leavepictureinpicture", onExitPip, false);

button.onclick = function() => {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  }
}
```


使用事件处理程序 `onleavepictureinpicture`:


```js
const video = document.querySelector('#video');
const button = document.querySelector('#button');

function onExitPip() {
  console.log("Picture-in-Picture mode deactivated!");
}

video.onleavepictureinpicture = onExitPip;

button.onclick = function() => {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  }
}
```

规范
--

| Specification |
| --- |
| Picture-in-Picture # eventdef-htmlvideoelement-leavepictureinpicture |
| Picture-in-Picture # dom-htmlvideoelement-onleavepictureinpicture |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `HTMLVideoElement`
* `Picture-in-Picture_API`
HTMLVideoElement: enterpictureinpicture event
=============================================

**`enterpictureinpicture`** 事件会在 `HTMLVideoElement` 成功进入画中画模式时触发。

此事件不可取消，也不会冒泡

语法
--

在 `addEventListener()`使用事件的名称，或者设置事件处理器属性。


```js
addEventListener("enterpictureinpicture", (event) => {});

onenterpictureinpicture = (event) => {};
```

事件类型
----

`PictureInPictureEvent` (en-US) 继承自 `Event` 。

Event

PictureInPictureEvent

(en-US)事件属性
----

此接口继承他的父类 `Event` 的属性。

示例
--

这些示例为 `enterpictureinpicture` 事件添加事件侦听器，然后在该事件处理程序对事件触发做出反应时发布消息。

使用 `addEventListener()`:


```js
const video = document.querySelector('#video');
const button = document.querySelector('#button');

function onEnterPip() {
  console.log("Picture-in-Picture mode activated!");
}

video.addEventListener('enterpictureinpicture', onEnterPip, false);

button.onclick = function() => {
  video.requestPictureInPicture();
}
```


使用事件处理程序 `onenterpictureinpicture` :


```js
const video = document.querySelector('#video');
const button = document.querySelector('#button');

function onEnterPip() {
  console.log("Picture-in-Picture mode activated!");
}

video.onenterpictureinpicture = onEnterPip;

button.onclick = function() => {
  video.requestPictureInPicture();
}
```

规范
--

| Specification |
| --- |
| Picture-in-Picture # eventdef-htmlvideoelement-enterpictureinpicture |
| Picture-in-Picture # dom-htmlvideoelement-onenterpictureinpicture |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `HTMLVideoElement`
* `Picture-in-Picture_API`
HTMLVideoElement.videoWidth
===========================

`HTMLVideoElement` 接口提供只读的 **`videoWidth`** 属性，指示视频的 固有宽度，使用 css 的像素值表示。
 简单来说，这是媒体的初始宽度。

参见 `HTMLVideoElement.videoHeight` > About intrinsic width and height 查看更多细节。

属性
--

 整数值，以 CSS 的像素值指定视频的固有宽度。
 如果元素的 `readyState` 是`HTMLMediaElement.HAVE_NOTHING`，则此属性的值为 0，因为视频和开头帧的大小并不能知道。

规范
--

| Specification |
| --- |
| HTML Standard # dom-video-videowidth-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLVideoElement.videoHeight
============================

`HTMLVideoElement` 接口提供只读的 **`videoHeight`** 属性，指示视频的 固有高度 ，使用 CSS 的像素值表示。
 简单来说，这是媒体的初始高度。

属性
--

 整数值，以 CSS 的像素值指定视频的固有高度。
 如果元素的 `readyState` 是 `HTMLMediaElement.HAVE_NOTHING`，则此属性的值为 0，因为视频和开头图片的大小并不能知道

### 关于固定的宽高

user agent 通过从媒体的原始像素宽度和高度开始计算元素媒体的固有宽度和高度，然后考虑以下因素：

* 媒体的宽高比。
* 媒体的镜头校正（以媒体中心点为中心的一个匹配目标长宽比的子矩形；译者注：用于校正媒体存在的暗角）。
* 目标设备的分辨率。
* 媒体格式所需要的任何其他因素。

如果元素当前显示的是视频的开头帧而不是呈现的视频内容，那么开头帧的固有大小将被视为元素 `<video>` 的大小。

 如果任何时候媒体的固有大小发生变化，但是元素的 `readyState` 不是 `HAVE_NOTHING`，则将会向该`<video>`元素发送 `resize` 事件。
 当元素从显示的开头帧切换到显示视频内容时，或者当显示的视频内容时。

示例
--

此示例为 `resize` 事件创建的处理程序，该事件调整 `<video>` 元素的大小以匹配其内容的固定大小。


```js
let v = document.getElementById("myVideo");

v.addEventListener(
  "resize",
  (ev) => {
    let w = v.videoWidth;
    let h = v.videoHeight;

    if (w && h) {
      v.style.width = w;
      v.style.height = h;
    }
  },
  false,
);
```


 请注意，只有当 `videoWidth` 和 `videoHeight` 都不是 0 的情况，才会应用更改。
 这样可以避免在还没有关于大小的情况下，应用无效的更改。

规范
--

| Specification |
| --- |
| HTML Standard # dom-video-videoheight-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.