recursal/MDN huggingface dataset:
self.createImageBitmap()
========================

**`createImageBitmap`** 方法存在 windows 和 workers 中。它接受各种不同的图像来源，并返回一个`Promise` (en-US), resolve 为`ImageBitmap`. 可选地参数，图像被剪裁成自（sx，sy）且宽度为 sw，高度为 sh 的像素的矩形。

Syntax
------
```

createImageBitmap(image[, options]).then(function(response) { ... });
createImageBitmap(image, sx, sy, sw, sh[, options]).then(function(response) { ... });
```

### Parameters

`image`

一个图像源，可以是一个 `<img>`, SVG `<image>`, `<video>`, `<canvas>`, `HTMLImageElement`, `SVGImageElement` (en-US), `HTMLVideoElement`, `HTMLCanvasElement`, `Blob`, `ImageData`, `ImageBitmap`, 或 `OffscreenCanvas` 对象。

`sx`

裁剪点 x 坐标。

`sy`

裁剪点 y 坐标。

`sw`

裁剪宽度，值可为负数。

`sh`

裁剪高度，值可为负数。

options 可选

为其设置选项的对象。可用的选项是：

* `imageOrientation`: 指示图像是按原样呈现还是垂直翻转。`none` (默认不翻转) 或 `flipY`.
* `premultiplyAlpha`: 指示位图颜色通道由 alpha 通道预乘。选择其一：`none`, `premultiply`, 或 `default` (默认).
* `colorSpaceConversion`: 指示图像是否使用色彩空间转换进行解码。`none` 或 `default` (默认). The value `default` indicates that implementation-specific behavior is used.
* `resizeWidth`: 指示新宽度的长整数。
* `resizeHeight`: 指示新高度的长整数。
* `resizeQuality`: 指定图像缩放算法。选择其一`pixelated`, `low` (默认), `medium`, 或 `high`.

### Return value

返回一个解决 ImageBitmap 的`Promise` (en-US) ，当 Promise 成功时 resolves 接收一个包含所得到的矩形的位图数据`ImageBitmap`。

Example
-------


```js
var canvas = document.getElementById("myCanvas"),
  ctx = canvas.getContext("2d"),
  image = new Image();

image.onload = function () {
  Promise.all([
    createImageBitmap(this, 0, 0, 32, 32),
    createImageBitmap(this, 32, 0, 32, 32),
  ]).then(function (sprites) {
    ctx.drawImage(sprites[0], 0, 0);
    ctx.drawImage(sprites[1], 32, 32);
  });
};

image.src = "sprites.png";
```

Specifications
--------------

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

Browser compatibility
---------------------

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

See also
--------

* `CanvasRenderingContext2D.drawImage()`
* `ImageData`
PushManager
===========

Push API 的`PushManager`接口提供了从第三方服务器接收消息通知的能力。

可以通过 ServiceWorkerRegistration.pushManager 属性获得

**备注：** 这个属性替代了已被废弃的`PushRegistrationManager`

Properties
----------

*None.*

Methods
-------

`PushManager.getSubscription()`

用于获取已经存在的 push 订阅。返回一个`Promise`，这个`Promise`包装着 push 订阅信息的`PushSubscription` (en-US)对象。如果没有已经存在的订阅，则返回`null`。

`PushManager.permissionState()` (en-US)

返回一个`Promise`，标识这当前`PushManager`的权限状态，只能是 `'granted'`，`'denied'` ，`'prompt'` 中的一种。

`PushManager.subscribe()`

向 push 服务器（即第三方 push server）发起订阅。返回一个`Promise`，这个`Promise`包装着 push 订阅信息的`PushSubscription` (en-US)对象。如果当前的 service worke 没有已经存在的订阅，则会创建一个新的 push 订阅。

### 已废弃的方法

`PushManager.hasPermission()` (en-US) 
已弃用

（已废弃）返回一个`Promise`，标识着该 webapp 的`PushPermissionStatus`状态，该状态只能是 `'granted'`，`'denied'` ，`'default'` 中的一种。目前已经被`PushManager.permissionState()` (en-US)取代。

`PushManager.register()` (en-US) 
已弃用

（已废弃）发起注册 push 订阅。目前已经被`PushManager.subscribe()`取代。

`PushManager.registrations()` (en-US) 
已弃用

（已废弃）返回已存在的 push 订阅信息。目前已经被`PushManager.getSubscription()`取代。

`PushManager.unregister()` (en-US) 
已弃用

（已废弃）取消注册并删除指定的注册信息。在更新后的 API 中，请使用 `PushSubscription.unsubscribe()` (en-US)方法取消注册。

示例
--


```js
this.onpush = function (event) {
  console.log(event.data);
  // 这里我们可以将数据写入 IndexedDB，发送给其他 window 对象，或者显示一个通知
};

navigator.serviceWorker
  .register("serviceworker.js")
  .then(function (serviceWorkerRegistration) {
    serviceWorkerRegistration.pushManager.subscribe().then(
      function (pushSubscription) {
        console.log(pushSubscription.subscriptionId);
        console.log(pushSubscription.endpoint);
        // 现在我们已经获取到了服务器需要的 push 订阅信息，我们可以使用 XHR 将它们发送给服务器
      },
      function (error) {
        // 在开发环境下打印错误是很有帮助的。在生产环境下，将错误上报到服务器也是十分必要的
        console.log(error);
      },
    );
  });
```

Specifications
--------------

| Specification |
| --- |
| Push API # pushmanager-interface |

Browser compatibility
---------------------

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

See also
--------

* Using the Push API (en-US)
* Push API
* Service Worker API
Encoding API
============

**Encoding API** 提供了一种机制来处理各种字符编码文本，包括传统的非 UTF-8 编码。

API 提供了四个接口：`TextDecoder`、`TextEncoder`、`TextDecoderStream` 和 `TextEncoderStream`。

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

接口
--

* `TextDecoder`
* `TextEncoder`
* `TextDecoderStream`
* `TextEncoderStream`
规范
--

| Specification |
| --- |
| Encoding Standard # interface-textdecoder |
| Encoding Standard # interface-textencoder |
| Encoding Standard # interface-textencoderstream |
| Encoding Standard # interface-textdecoderstream |

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

### api.TextDecoder

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

### api.TextEncoder

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

### api.TextEncoderStream

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

### api.TextDecoderStream

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

参见
--

* 一个 shim，允许在不支持的浏览器中使用这个接口。
Force Touch events
==================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

**Force Touch events** are a proprietary, Apple-specific feature which makes possible (where supported by the input hardware) new interactions based on how hard the user clicks or presses down on the touchscreen or trackpad.

事件
--

`webkitmouseforcewillbegin` (en-US) 
非标准

This event is fired before the `mousedown` event. Its main use is that it can be `Event.preventDefault()`ed.

`webkitmouseforcedown` (en-US) 
非标准

This event is fired after the `mousedown` event as soon as sufficient pressure has been applied for it to qualify as a "force click".

`webkitmouseforceup` (en-US) 
非标准

This event is fired after the `webkitmouseforcedown` (en-US) event as soon as the pressure has been reduced sufficiently to end the "force click".

`webkitmouseforcechanged` (en-US) 
非标准

This event is fired each time the amount of pressure changes. This event first fires after the `mousedown` event and stops firing before the `mouseup` event.

事件属性
----

The following property is known to be available on the `webkitmouseforcewillbegin` (en-US), `mousedown`, `webkitmouseforcechanged` (en-US), `webkitmouseforcedown` (en-US), `webkitmouseforceup` (en-US), `mousemove`, and `mouseup` event objects:

`MouseEvent.webkitForce` (en-US) 
非标准
 只读 

当前施加于触控板/触摸屏的压力大小

常量
--

这些常数对于确定由 `MouseEvent.webkitForce` (en-US) 指示的压力的相对强度是有用的：

`MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN` (en-US) 
非标准
 只读 

正常点击所需的最小力量

`MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN` (en-US) 
非标准
 只读 

强制点击所需的最小力量

规范
--

\*不是任何规格的一部分。\*苹果在 Mac 开发者图书馆有一个描述。
WebGLFramebuffer
================

**WebGLFramebuffer** 接口时 WebGL API 的一部分，它提供了一个缓冲区的集合，这些缓冲区可以作为一个整体用作渲染操作的目标缓冲区。

摘要
--

`WebGLFramebuffer` 对象的内容不能直接访问，因此该对象没有定义任何用于操作其自身内容的方法和属性。需要使用 `WebGLFramebuffer` 对象时，请使用 `WebGLRenderingContext` 对象的以下方法：

* `WebGLRenderingContext.bindFramebuffer()`
* `WebGLRenderingContext.createFramebuffer()`
* `WebGLRenderingContext.deleteFramebuffer()`
* `WebGLRenderingContext.isFramebuffer()` (en-US)
示例
--

### 创建一个帧缓冲


```js
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
var buffer = gl.createFramebuffer();
```

规范
--

| Specification |
| --- |
| WebGL Specification # 5.5 |

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

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

参见
--

* `WebGLRenderingContext.bindFramebuffer()`
* `WebGLRenderingContext.createFramebuffer()`
* `WebGLRenderingContext.deleteFramebuffer()`
* `WebGLRenderingContext.isFramebuffer()` (en-US)
* 其他缓冲区：`WebGLBuffer`, `WebGLRenderbuffer`
WebGLActiveInfo
===============

**WebGLActiveInfo**是WebGL API 的一部分，并且代表了调用 `WebGLRenderingContext.getActiveAttrib()` (en-US) 和`WebGLRenderingContext.getActiveUniform()` (en-US) 这两个方法后传回的信息。

属性值
---

`WebGLActiveInfo.name` (en-US)

请求变量的只读名称。

`WebGLActiveInfo.size` (en-US)

请求变量的只读尺寸。

`WebGLActiveInfo.type` (en-US)

请求变量的只读类型。

示例
--

`WebGLActiveInfo` 对象可以通过以下方式返回：

* `WebGLRenderingContext.getActiveAttrib()` (en-US)
* `WebGLRenderingContext.getActiveUniform()` (en-US)
* `WebGL2RenderingContext.getTransformFeedbackVarying()` (en-US)


```js
WebGLActiveInfo? getActiveAttrib(WebGLProgram? program, GLuint index);
WebGLActiveInfo? getActiveUniform(WebGLProgram? program, GLuint index);
WebGLActiveInfo? getTransformFeedbackVarying(WebGLProgram? program, GLuint index)
```

规范
--

| Specification |
| --- |
| WebGL Specification # 5.11 |

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

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

另请参见
----

* `WebGLRenderingContext.getActiveAttrib()` (en-US)
* `WebGLRenderingContext.getActiveUniform()` (en-US)
WakeLock
========

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

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

**`WakeLock`** 接口允许一个文件获取屏幕唤醒锁定。

方法
--

`WakeLock.request()`

返回一个决议为 `WakeLockSentinel` (en-US) 的 `Promise` 或当唤醒锁定不可访问的时候抛出异常。

示例
--

以下例子获取一个唤醒锁定并在 10 分钟后释放它：
```

function tryKeepScreenAlive(minutes) {
  navigator.wakeLock.request("screen").then(lock => {
    setTimeout(() => lock.release(), minutes * 60 * 1000);
  });
}

tryKeepScreenAlive(10);
```

规范
--

| Specification |
| --- |
| Screen Wake Lock API # the-wakelock-interface |

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

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

相关链接
----

* `Navigator.wakeLock` (en-US)
CustomEvent
===========

`CustomEvent` 接口表示由程序出于某个目的而创建的事件。

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

Event

CustomEvent构造函数
----

`CustomEvent()`

创建一个新的 `CustomEvent`。

属性
--

*此接口从父接口 `Event` 继承属性。*

`CustomEvent.detail` 只读 

返回在初始化事件时传入的任何数据。

方法
--

*此接口从父接口 `Event` 继承方法。*

`CustomEvent.initCustomEvent()` 
已弃用

初始化一个 `CustomEvent` 对象。如果事件已经被触发，这个方法将不会起任何作用。

规范
--

| Specification |
| --- |
| DOM Standard # interface-customevent |

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

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

参见
--

* `Window.postMessage()`
* 创建和触发事件
PerformanceNavigation
=====================

**`PerformanceNavigation`** 接口呈现了如何导航到当前文档的信息。

这个类型的对象可以被只读属性`Performance.navigation`调用。

Properties
----------

*`PerformanceNavigation` 接口不继承任何属性。*

`PerformanceNavigation.type` (en-US) 只读 

一个无符号短整型，表示是如何导航到这个页面的。可能的值如下：

`TYPE_NAVIGATE` (0)

当前页面是通过点击链接，书签和表单提交，或者脚本操作，或者在 url 中直接输入地址，type 值为 0

`TYPE_RELOAD` (1)

点击刷新页面按钮或者通过`Location.reload()`方法显示的页面，type 值为 1

`TYPE_BACK_FORWARD` (2)

页面通过历史记录和前进后退访问时。type 值为 2

`TYPE_RESERVED` (255)

任何其他方式，type 值为 255


`PerformanceNavigation.redirectCount` (en-US) 只读 

无符号短整型，表示在到达这个页面之前重定向了多少次。

Methods
-------

**`Performance` 接口没有继承任何方法**

`PerformanceNavigation.toJSON()` (en-US) 
非标准

把`PerformanceNavigation`转换成 JSON 对象

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

See also
--------

* The `Performance` that allows access to an object of this type.
* `PerformanceNavigationTiming` (part of Navigation Timing Level 2) 
实验性
Push API
========

**Push API** 给与了 Web 应用程序接收从服务器发出的推送消息的能力，无论 Web 应用程序是否在用户设备前台，甚至刚加载完成。这样，开发人员就可以向用户投放异步通知和更新，从而让用户能更及时地获取新内容。

Push 的概念及用法
-----------

**警告：** 在实现 PushManager 订阅时，请确保你的应用程序免受 CSRF/XSRF（跨站请求伪造）问题。参见以下的文章以了解更多信息：

* 跨站请求伪造（CSRF）预防清单
* 防止 CSRF 和 XSRF 攻击

对于一个应用来说，要想要接收到推送消息，需要有一个激活的 service worker。当 service worker 处于激活状态时，可以使用 `PushManager.subscribe()` 来订阅推送通知。

返回的 `PushSubscription` (en-US) 包含了有关应用需要发送的推送消息的所有信息：端点及发送数据需要的加密密钥。

Service worker 会在必要的时候启动并接收传入的推送消息，将其传递给 `onpush` (en-US) 事件处理器。该方法允许应用程序在接收到推送消息时作出反应，例如显示一条通知（使用 `ServiceWorkerRegistration.showNotification()` (en-US)）。

每一个订阅对 service worker 来说都是唯一的。同时订阅的端点也是一个唯一的功能性 URL：端点的信息是给应用发送信息的全部必要条件。所以端点地址需要保密，否则其他应用也可以向你的应用推送消息。

激活一个 service worker 来提供推送消息会导致资源消耗的增加，尤其是电池。不同的浏览器对此有不同的方案——目前为止还没有标准的机制。Firefox 允许对发送给应用的推送消息做数量限制（配额），但生成通知的推送消息不受此限制。该限制会在站点每一次被访问之后刷新。相比之下，Chrome 选择不作限制。

接口
--

`PushEvent` (en-US)

表示发送到 `ServiceWorker` 全局全局作用域的推送操作。它包含了从应用程序发送到 `PushSubscription` (en-US) 的消息。

`PushManager`

提供一种从第三方服务器接收通知和用于推送通知的请求 URL 的方法。

`PushMessageData` (en-US)

提供对服务器发送的推送数据的访问，包括在接收数据时对数据进行操作的方法。

`PushSubscription` (en-US)

提供一个订阅的端点 URL，并允许取消推送服务的订阅。

`PushSubscriptionOptions` (en-US)

表示与推送订阅相关联的选项。

Service worker 附加的内容
--------------------

以下附加到 Service Worker API 的内容已在 Push API 规范中定义，以提供使用推送消息的入口点。它们用于监听和响应推送和订阅改变的事件。

`ServiceWorkerRegistration.pushManager` 只读 

返回对 `PushManager` 接口的一个引用，该接口用于管理 push 订阅，包括：订阅、获取一个活跃的订阅、获取 push 权限的状态。这是使用接收推送消息能力的入口点。

`onpush` (en-US)

一个在 `push` (en-US) 事件被触发时（即收到服务器的推送消息时）的事件处理器。

`onpushsubscriptionchange` (en-US)

一个在 `pushsubscriptionchange` (en-US) 事件被触发时（例如，推送服务器设置了过期时间，因而造成推送订阅已经或即将失效）的事件处理器。

示例
--

Mozilla 的 ServiceWorker Cookbook 中包含了许多关于 Push 有用的示例。

规范
--

| Specification |
| --- |
| Push API # pushevent-interface |
| Push API # pushmessagedata-interface |

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

### api.PushEvent

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

### api.PushMessageData

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

参见
--

* 通过 Mozilla 推送服务发送具有 VAPID 标识的 WebPush 通知
* 推送通知概述
* Service Worker API
Notification
============

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

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

Notifications API 的接口 `Notification` 用于配置以向用户显示桌面通知。

这些通知的外观和功能因平台而异，但通常它们会提供一种异步向用户提供信息的方式。

EventTarget

Notification构造函数
----

`Notification()`

创建一个新的 `Notification` 实例对象。

静态属性
----

这些属性只能用于 `Notification` 对象自身。

`Notification.permission` 只读 

一个字符串，表示当前显示通知的权限。可能的值是：

* `denied`——用户拒绝显示通知。
* `granted`——用户接受显示通知。
* `default`——用户选择是未知的，因此浏览器的行为类似于值是 denied。

`Notification.maxActions_static` 只读  
实验性

设备和用户代理支持的最大的操作数量。

实例属性
----

这些属性仅用于 `Notification` 实例对象上。

`Notification.actions` 只读  
实验性

在构造函数的 `options` 参数中指定的通知的操作数组。

`Notification.badge` 只读 

当没有足够的空间去显示通知自身（例如 Android 通知栏）时，用于表示通知图像的 URL。在安卓设备上，徽章的分辨率应达到 4x（约 96 x 96 px），图片会被自动屏蔽。

`Notification.body` 只读 

在构造函数的 `options` 参数中指定的通知的正文字符串。

`Notification.data` 只读 

返回一个通知数据的结构化克隆。

`Notification.dir` 只读 

在构造函数的 `options` 参数中指定的通知的文本方向。

`Notification.lang` 只读 

在构造函数的 `options` 参数中指定的通知的语言。

`Notification.tag` 只读 

在构造函数的 `options` 参数中指定的通知的 ID（如果有的话）。

`Notification.icon` 只读 

在构造函数的 `options` 参数中用作指定通知图标的图像 URL。

`Notification.image` 只读  
实验性

作为通知的一部分显示的图像 URL，在构造函数的选项参数中指定。

`Notification.renotify` 只读  
实验性

指定在新通知取代旧通知后，是否应该通知用户。

`Notification.requireInteraction` 只读 

一个布尔值，表示通知应该保持活动状态，直到用户点击或者关掉它，而不是自动关闭。

`Notification.silent` 只读 

指定通知是否应该静音——即，无论设备的设置如何，都不应发出声音和振动。

`Notification.timestamp` 只读  
实验性

指定通知创建或者应用时（过去、现在或者未来）的时间。

`Notification.title` 只读 

在构造函数第一个参数中指定的通知标题。

`Notification.vibrate` 只读  
实验性

为拥有振动硬件的终端设备指定振动模式。

静态方法
----

这些属性只能用于 `Notification` 对象自身。

`Notification.requestPermission()`

请求用户允许显示通知。

实例方法
----

这些属性仅用于 `Notification` 实例对象或者通过 `prototype` 提供。`Notification` 对象也继承自 `EventTarget` 接口。

`Notification.close()`

以编程方式关闭通知实例。

事件
--

`click`

当用户点击通知时触发。

`close`

当用户关闭通知时触发。

`error`

当通知发生错误时触发。

`show`

当通知显示时触发。

示例
--

假定有如下 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 # api |

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

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

参见
--

* 使用 Notifications API
EXT\_float\_blend
=================

WebGL API 的 `EXT_float_blend` 扩展允许使用 32 位浮点数组件来混合和绘制缓冲区。

若要查询该扩展是否存在，可以用方法：`WebGLRenderingContext.getExtension()`。更多信息可以参考 WebGL tutorial 中的 Using Extensions。

**备注：** 该扩展在 `WebGL1` 和`WebGL2` 上下文中均存在。但是，要使用它，你需要启用对 32 位浮点绘制缓冲区的使用`WEBGL_color_buffer_float` (en-US)（for WebGL1）或 `EXT_color_buffer_float` (en-US)（WebGL2）。通过启用 32 位浮点缓冲区扩展，将自动启用`EXT_float_blend`。

该组件启用后，使用 32 位浮点数混合方式绘制，调用 `drawArrays()` 或 `drawElements()` 时，将不再产生 `INVALID_OPERATION` 异常。

使用说明
----

在支持 `EXT_float_blend` 扩展的设备上，当以下几种有一种或几种扩展启用时`EXT_color_buffer_float` (en-US), `OES_texture_float` (en-US), 或 `WEBGL_color_buffer_float` (en-US)，该扩展将会自动、隐式的启用。这确保了在该扩展定义之前的内容也都能够按照预期正确执行。

例子
--


```js
const gl = canvas.getContext("webgl2");

// enable necessary extensions
gl.getExtension("EXT\_color\_buffer\_float");
gl.getExtension("EXT\_float\_blend");

const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE\_2D, tex);

// use floating point format
gl.texImage2D(gl.TEXTURE\_2D, 0, gl.RGBA32F, 1, 1, 0, gl.RGBA, gl.FLOAT, null);

const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(
  gl.FRAMEBUFFER,
  gl.COLOR\_ATTACHMENT0,
  gl.TEXTURE\_2D,
  tex,
  0,
);

// enable blending
gl.enable(gl.BLEND);

gl.drawArrays(gl.POINTS, 0, 1);
// won't throw gl.INVALID\_OPERATION with the extension enabled
```

规范
--

| Specification |
| --- |
| WebGL EXT\_float\_blend Extension Specification  |

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

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

其他参考
----

* WebGL API
* Using WebGL extensions
* WebGL 教程
* `WebGLRenderingContext.getExtension()`
* `EXT_color_buffer_float` (en-US)
* `WEBGL_color_buffer_float` (en-US)
* `WebGLRenderingContext.drawArrays()`
* `WebGLRenderingContext.drawElements()`
VRPose
======

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

The **`VRPose`** interface of the WebVR API represents the state of a VR sensor at a given timestamp (which includes orientation, position, velocity, and acceleration information.)

WebVR API 中的 **`VRPose`** 接口表示在一个给定的时间戳中，一个 VR 传感器的状态（包括了方向、位置、速度和加速度信息）。

This interface is accessible through the `VRDisplay.getPose()` (en-US) and `VRDisplay.getImmediatePose()` (en-US) methods.

这个接口能通过 `VRDisplay.getPose()` (en-US) 和 `VRDisplay.getImmediatePose()` (en-US) 方法访问

Properties
----------

`VRPose.timeStamp` 只读 

返回当前系统的时间戳。此单调递增的值可以有助于确定位置数据是否有更新，以及更新的顺序。

`VRPose.position` (en-US) 只读 

以三维向量的形式返回当前时间戳 `VRPose.timestamp` 时 `VRDisplay` 的位置信息。

`VRPose.linearVelocity` (en-US) 只读 

返回当前时间戳 `VRPose.timestamp` 时 `VRDisplay` 的线速度，单位为米/秒。

`VRPose.linearAcceleration` (en-US) 只读 

返回当前时间戳 `VRPose.timestamp` 时 `VRDisplay` 的线加速度，单位为米/平方秒。

`VRPose.orientation` (en-US) 只读 

以四元数的形式返回当前时间戳 `VRPose.timestamp` 时传感器的方向，

`VRPose.angularVelocity` (en-US) 只读 

返回当前时间戳 `VRPose.timestamp` 时 `VRDisplay` 的角速度，单位为弧度/秒。

`VRPose.angularAcceleration` (en-US) 只读 

返回当前时间戳 `VRPose.timestamp` 时 `VRDisplay` 的角加速度，单位为弧度/平方秒。

Examples
--------
```

TBD.
```

Specifications
--------------

该 API 在旧的 WebVR API（已被 WebXR Device API 取代）中定义。它不再有望成为标准。

在所有浏览器都实现新的 WebXR API (en-US) 之前，建议使用框架（如：A-Frame、Babylon.js 或 Three.js）或 polyfill 来开发适用于所有浏览器的 WebXR 应用程序。[1]

Browser compatibility
---------------------

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

See also
--------

* WebVR API
TouchEvent
==========

`TouchEvent` 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。

每 个 `Touch` 对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标 `element` 描述。 `TouchList` 对象代表多个触点的一个列表。

构造函数
----

`TouchEvent()` (en-US)

创建一个`TouchEvent`对象。

属性列表
----

*`TouchEvent`的属性继承了 `UIEvent` 和 `Event`。*

`TouchEvent.altKey` 只读 

布尔值，指明触摸事件触发时，键盘 alt 键是否被按下。

`TouchEvent.changedTouches` 只读 

一个 `TouchList` 对象，包含了代表所有从上一次触摸事件到此次事件过程中，状态发生了改变的触点的 `Touch` 对象。

`TouchEvent.ctrlKey` 只读 

布尔值，指明触摸事件触发时，键盘 ctrl 键是否被按下。

`TouchEvent.metaKey` 只读 

布尔值，指明触摸事件触发时，键盘 meta 键（Wikipedia - meta Key）是否被按下。

`TouchEvent.shiftKey` 只读 

布尔值，指明触摸事件触发时，键盘 shift 键是否被按下。

`TouchEvent.targetTouches` 只读 

一个 `TouchList` 对象，是包含了如下触点的 `Touch` 对象：触摸起始于当前事件的目标 `element` 上，并且仍然没有离开触摸平面的触点。

`TouchEvent.touches` 只读 

一 个 `TouchList` 对象，包含了所有当前接触触摸平面的触点的 `Touch` 对象，无论它们的起始于哪个 `element` 上，也无论它们状态是否发生了变化。

触摸事件的类型
-------

为了区别触摸相关的状态改变，存在多种类型的触摸事件。可以通过检查触摸事件的 `TouchEvent.type` 属性来确定当前事件属于哪种类型

**备注：** 在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。如果你使用了触摸事件，可以调用 `event.preventDefault()` 来阻止鼠标事件被触发。

### `touchstart`

当用户在触摸平面上放置了一个触点时触发。事件的目标 `element` 将是触点位置上的那个目标 `element`

### `touchend`

当一个触点被用户从触摸平面上移除（即用户的一个手指或手写笔离开触摸平面）时触发。当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。

事件的目标 `element` 与触发 `touchstart` 事件的目标 `element` 相同，即使 `touchend` 事件触发时，触点已经移出了该 `element` 。

已经被从触摸平面上移除的触点，可以在 `changedTouches` 属性定义的 `TouchList` 中找到。

### `touchmove`

当用户在触摸平面上移动触点时触发。事件的目标 `element` 和触发 `touchstart` 事件的目标 `element` 相同，即使当 `touchmove` 事件触发时，触点已经移出了该 `element` 。

当触点的半径、旋转角度以及压力大小发生变化时，也将触发此事件。

**备注：** 不同浏览器上 `touchmove` 事件的触发频率并不相同。这个触发频率还和硬件设备的性能有关。因此决不能让程序的运作依赖于某个特定的触发频率。

### `touchcancel`

当触点由于某些原因被中断时触发。有几种可能的原因如下（具体的原因根据不同的设备和浏览器有所不同）：

* 由于某个事件出现而取消了触摸：例如触摸过程被弹窗打断。
* 触点离开了文档窗口，而进入了浏览器的界面元素、插件或者其他外部内容区域。
* 当用户产生的触点个数超过了设备支持的个数，从而导致 `TouchList` 中最早的 `Touch` 对象被取消。
### 与 addEventListener() 和 preventDefault() 一起使用

很值得注意的是，在很多情况下，触摸事件和鼠标事件会一起触发（以使非触摸专用的代码仍然可以与用户交互）。如果你要使用触摸事件，你可以使用 `preventDefault()` 来取消鼠标事件。

但 Chrome 是例外，从版本 56（桌面版、安卓版和安卓 webview）开始，Chrome 中 `touchstart` and `touchmove` 的默认值就是 `true`，没有必要调用 `preventDefault()`。如果要重写这个行为，简单地将 `passive` 设置成 `false` 就行。这样设置可以阻止监听器在用户滚动时停止页面渲染。Google Developer 有一个简单的演示。

全局事件处理
------

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

`GlobalEventHandlers.ontouchstart` 
实验性

使用一个 `global event handler` 处理`touchstart` 事件。

`GlobalEventHandlers.ontouchend` (en-US) 
实验性

使用一个 `global event handler` 处理 `touchend` 事件。

`GlobalEventHandlers.ontouchmove` 
实验性

使用一个 `global event handler` 处理 `touchmove` 事件。

`GlobalEventHandlers.ontouchcancel` 
实验性

使用一个 `global event handler` 处理 `touchcancel` 事件。

实例
--

请看 example on the main Touch events article.

规范
--

| Specification |
| --- |
| Touch Events # touchevent-interface |

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

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

相关链接
----

* `Touch Events Overview`
* `GestureEvent`
* `MSGestureEvent`
DeviceOrientationEvent
======================

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

`DeviceOrientationEvent` 提供给网页开发者当设备（指手机，平板等移动设备）在浏览页面时物理旋转的信息。

**警告：** 当前，火狐浏览器和谷歌浏览器并未能用同一种方式实现，在使用请注意。（见后文）

属性
--

`DeviceOrientationEvent.absolute` 只读 

用来说明设备是提供的旋转数据是否是绝对定位的布尔值。

`DeviceOrientationEvent.alpha` 只读 

一个表示设备绕 z 轴旋转的角度（范围在 0-360 之间）的数字

`DeviceOrientationEvent.beta` 只读 

一个表示设备绕 x 轴旋转（范围在－180 到 180 之间）的数字，从前到后的方向为正方向。

`DeviceOrientationEvent.gamma` 只读 

一个表示设备绕 y 轴旋转（范围在－90 到 90 之间）的数字，从左向右为正方向。

例子
--


```js
window.addEventListener("deviceorientation", function (event) {
  console.log(event.alpha + " : " + event.beta + " : " + event.gamma);
});
```

规范
--

| Specification |
| --- |
| DeviceOrientation Event Specification # deviceorientation |

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

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

参见
--

* `deviceorientation`
* `DeviceMotionEvent`
* `devicemotion`
* 监测设备方向 (en-US)
* 转动与运动的数据说明