recursal/MDN huggingface dataset:
BaseAudioContext.createConstantSource()
=======================================

**`createConstantSource()`** 是 `BaseAudioContext` (en-US) 接口的一个方法，用于生成一个 `ConstantSourceNode` (en-US) 对象，该对象是一个输出单信道（one-channel）音频信号的音频源，这些音频信号都拥有一个恒定的样本值。

Syntax
------
```

var constantSourceNode = AudioContext.createConstantSource()
```

### Parameters

None.

### Returns

A `ConstantSourceNode` (en-US) instance.

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

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createconstantsource |

Browser Compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
BaseAudioContext.createPeriodicWave()
=====================================

`BaseAudioContext` (en-US) 接口的 `createPeriodicWave()` 方法用于创建可对 `OscillatorNode` 输出进行整形的 `PeriodicWave`（周期波）。

语法
--
```

var wave = AudioContext.createPeriodicWave(real, imag[, constraints]);
```

### 返回值

一个 `PeriodicWave`.

### 参数

`real`

一系列余弦术语 (传统上的 A 项)。

`imag`

一系列正弦项 (传统上的 B 项)。

`constraints` 可选

一个字典对象，用于指定是否禁用规范化（如果没有指定，则默认启动规范化）。它有一个属性：

* `disableNormalization`: 如果设置为 `true`，对周期波禁用规范化。默认值为 `false`.


**备注：** 如果使用规范化，生成波形的最大绝对峰值为 1。

例子
--

下面的例子为 `createPeriodicWave()` 的简单用法，创建包含简单正弦波的 `PeriodicWave` 对象。


```js
var real = new Float32Array(2);
var imag = new Float32Array(2);
var ac = new AudioContext();
var osc = ac.createOscillator();

real[0] = 0;
imag[0] = 0;
real[1] = 1;
imag[1] = 0;

var wave = ac.createPeriodicWave(real, imag, { disableNormalization: true });

osc.setPeriodicWave(wave);

osc.connect(ac.destination);

osc.start();
osc.stop(2);
```


这之所以有用是因为根据定义仅包含基本音调的声音是正弦波。

这里，我们创建一个具有两个值的 `PeriodicWave` (周期波) 。第一个值是 DC(直流) 偏移，它是振荡器启动的值。0 在这里是好的，因为我们想在 [-1.0; 1.0] 范围的中间开始曲线。

第二个值和后续值是正弦和余弦分量。你可以把它看做是傅里叶变换的结果，可以从时域值中获取频域值。这里，使用 `createPeriodicWave()`，你可以指定频率，浏览器会执行一个逆傅里叶变换，以获得振荡器的时域缓冲。这里，我们只在基础音上设置了一个全音量 (1.0) 的分量，所以我们得到一个正弦波。

傅里叶变换系数应该按升序给出（例如：


(

a
+
b
i

)

e
i

,

(

c
+
d
i

)

e

2
i

,

(

f
+
g
i

)

e

3
i

\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i} 

等。）可以是正的或者是负的。一个简单的手动获取此类系数的方法是使用图形计算器，尽管这不是最好的。

规格
--

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createperiodicwave |

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

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

参见
--

* Using the Web Audio API (en-US)
AudioContext.onstatechange
==========================

`AudioContext` 的 `onstatechange` 属性定义了一个事件处理器函数，触发 `statechange` (en-US) 会被调用，也就是说 audio context 的状态发生变化时会执行。

语法
--


```js
var audioCtx = new AudioContext();
audioCtx.onstatechange = function() { ... };
```

例子
--

下面这段代码是AudioContext states DEMO (直接运行) 中的，其中 `onstatechange` 处理器会在每次当前 `state` 发生变化时把它输出到控制台。


```js
audioCtx.onstatechange = function () {
  console.log(audioCtx.state);
};
```

规范
--

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-onstatechange |

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

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

另见
--

* Using the Web Audio API (en-US)
AudioContext.createConvolver()
==============================

`AudioContext`的方法 `createConvolver()` 能创建一个 `ConvolverNode`，通常用来对你的音频应用混响效果。在 Convolution 规范定义 中查看更多信息。

语法
--


```js
var audioCtx = new AudioContext();
var convolver = audioCtx.createConvolver();
```

### 返回值

`ConvolverNode`对象。

例子
--

下面的例子展示了一个 AudioContext 创建一个 混响器节点 的基本使用方法。基本前提是你创建一个包含声音样本的 AudioBuffer 用作混响环境 (称之为*脉冲响应*,) 和在混响器中应用。下面的例子使用了一个简短的示例音乐厅人群效果，所以混响效果应用深度和回声。

更多完整例子请查看 Voice-change-O-matic demo (中 app.js 的代码)。


```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var convolver = audioCtx.createConvolver();

  ...

// grab audio track via XHR for convolver node

var soundSource, concertHallBuffer;

ajaxRequest = new XMLHttpRequest();
ajaxRequest.open('GET', 'concert-crowd.ogg', true);
ajaxRequest.responseType = 'arraybuffer';

ajaxRequest.onload = function() {
  var audioData = ajaxRequest.response;
  audioCtx.decodeAudioData(audioData, function(buffer) {
      concertHallBuffer = buffer;
      soundSource = audioCtx.createBufferSource();
      soundSource.buffer = concertHallBuffer;
    }, function(e){"Error with decoding audio data" + e.err});
}

ajaxRequest.send();

  ...

convolver.buffer = concertHallBuffer;
```

规范
--

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createconvolver |

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

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

另见
--

* Using the Web Audio API (en-US)
AudioContext.destination
========================

`AudioContext`的 `destination` 属性返回一个 `AudioDestinationNode`，表示 context 中所有音频的最终目标节点，一般是音频渲染设备，比如扬声器。

值
-

`AudioDestinationNode` 节点。

示例
--

**备注：** 如果需要完整的实现示例，可以去看看 MDN Github repo 的演示，比如 voice-change-o-matic。


```js
const audioCtx = new AudioContext();
// 旧式的 webkit/blink 浏览器需要一个前缀

const oscillatorNode = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();

oscillatorNode.connect(gainNode);
gainNode.connect(audioCtx.destination);
```

规范
--

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-destination |

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

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

参见
--

* 使用 Web 音频 API (en-US)
AudioContext.createChannelMerger()
==================================

`AudioContext.createChannelMerger()` 方法，会创建一个 `ChannelMergerNode`，后者可以把多个音频流的通道整合到一个音频流。

语法
--


```js
var audioCtx = new AudioContext();
var merger = audioCtx.createChannelMerger(2);
```

### 参数

numberOfInputs

通道输入音频流的数量，输出流将包含这个数量的通道。默认值 6。

### 返回值

一个 `ChannelMergerNode`.

示例
--

下面的例子展示了如何分离立体音轨（就是一段音乐），处理使左右声道不同。使用的时候，需要指定 AudioNode.connect(AudioNode) 方法的第二个和第三个参数，分别用来指定通道链接来源的索引和输出的索引。


```js
var ac = new AudioContext();
ac.decodeAudioData(someStereoBuffer, function (data) {
  var source = ac.createBufferSource();
  source.buffer = data;
  var splitter = ac.createChannelSplitter(2);
  source.connect(splitter);
  var merger = ac.createChannelMerger(2);

  // Reduce the volume of the left channel only
  var gainNode = ac.createGain();
  gainNode.gain.value = 0.5;
  splitter.connect(gainNode, 0);

  // Connect the splitter back to the second input of the merger: we
  // effectively swap the channels, here, reversing the stereo image.
  gainNode.connect(merger, 0, 1);
  splitter.connect(merger, 1, 0);

  var dest = ac.createMediaStreamDestination();

  // Because we have used a ChannelMergerNode, we now have a stereo
  // MediaStream we can use to pipe the Web Audio graph to WebRTC,
  // MediaRecorder, etc.
  merger.connect(dest);
});
```

规范
--

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createchannelmerger |

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

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

参见
--

* Using the Web Audio API (en-US)
AudioContext.decodeAudioData()
==============================

`AudioContext`接口的 `decodeAudioData()` 方法可用于异步解码音频文件中的 `ArrayBuffer`。`ArrayBuffer` 数据可以通过 `XMLHttpRequest` 和 `FileReader` 来获取。AudioBuffer 是通过 AudioContext 采样率进行解码的，然后通过回调返回结果。

这是从音频轨道创建用于 web audio API 音频源的首选方法。

语法
--

旧版的回调函数语法
```

audioCtx.decodeAudioData(audioData, function(decodedData) {
  // use the decoded data here
});
```


新版的 promise-based 语法：
```

audioCtx.decodeAudioData(audioData).then(function(decodedData) {
  // use the decoded data here
});
```

举例
--

在本章节中，我们将首先学习基于回调的系统，然后采用新的基于 promise-based 的语法

### 旧的回调语法

在这个事例中， `getData()` 方法使用 XHR 加载一个音轨，设置请求的 responsetype 为 ArrayBuffer 使它返回一个 arraybuffer 数据，然后存储在 audioData 变量中。然后我们将这个 arraybuffer 数据置于 `decodeAudioData()` 方法中使用，当成功解码 PCM Data 后通过回调返回，将返回的结果通过`AudioContext.createBufferSource()`接口进行处理并获得一个`AudioBufferSourceNode`, 将源连接至`AudioContext.destination`并将它设置为循环的。

通过按钮来运行 `getData()` 来获取音轨并播放它。当使用 `stop()` 方法后 source 将会被清除。

**备注：** You can run the example live (or view the source.)


```js
// define variables

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var source;

var pre = document.querySelector("pre");
var myScript = document.querySelector("script");
var play = document.querySelector(".play");
var stop = document.querySelector(".stop");

// use XHR to load an audio track, and
// decodeAudioData to decode it and stick it in a buffer.
// Then we put the buffer into the source

function getData() {
  source = audioCtx.createBufferSource();
  var request = new XMLHttpRequest();

  request.open("GET", "viper.ogg", true);

  request.responseType = "arraybuffer";

  request.onload = function () {
    var audioData = request.response;

    audioCtx.decodeAudioData(
      audioData,
      function (buffer) {
        source.buffer = buffer;

        source.connect(audioCtx.destination);
        source.loop = true;
      },

      function (e) {
        "Error with decoding audio data" + e.err;
      },
    );
  };

  request.send();
}

// wire up buttons to stop and play audio

play.onclick = function () {
  getData();
  source.start(0);
  play.setAttribute("disabled", "disabled");
};

stop.onclick = function () {
  source.stop(0);
  play.removeAttribute("disabled");
};

// dump script to pre element

pre.innerHTML = myScript.innerHTML;
```

### 新的 promise-based 语法


```js
ctx.decodeAudioData(compressedBuffer).then(function (decodedData) {
  // use the decoded data here
});
```

参数
--

ArrayBuffer

将会被解码的音频数据，可通过`XMLHttpRequest`或`FileReader`来获取。

DecodeSuccessCallback

当成功解码后会被调用的回调函数。该回调函数只有一个 AudioBuffer 类型参数。

DecodeErrorCallback

一个可选的错误回调函数。

返回
--

一个 `Promise` (en-US)对象。

规范
--

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-decodeaudiodata |

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

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

参见
--

* Using the Web Audio API (en-US)
AudioContext.state
==================

`AudioContext`的 `state` 属性是只读的，返回 `AudioContext` 的当前状态。

语法
--


```js
var audioCtx = new AudioContext();
var myState = audioCtx.state;
```

### 返回值

`DOMString`，可能的值如下：

* `suspended`: audio context 被阻塞了 (用`AudioContext.suspend()` 方法)
* `running`: audio context 正常运行
* `closed`: audio context 被关闭了 (用`AudioContext.close()`方法)
例子
--

下面这段代码是AudioContext states demo (直接运行) 中的，其中`AudioContext.onstatechange`处理器会在每次当前状态发生变化时把它输出到控制台。


```js
audioCtx.onstatechange = function () {
  console.log(audioCtx.state);
};
```

规范
--

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-state |

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

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

另见
--

* Using the Web Audio API (en-US)
AudioContext.createChannelSplitter()
====================================

The `createChannelSplitter()` method of the `AudioContext` Interface is used to create a `ChannelSplitterNode` (en-US), which is used to access the individual channels of an audio stream and process them separately.

Syntax
------


```js
var audioCtx = new AudioContext();
var splitter = audioCtx.createChannelSplitter(2);
```

### 参数

numberOfOutputs

你期待将输入音频分割成的声道道数目; 当不传入参数时，默认为 6

### Returns

一个 `ChannelSplitterNode` (en-US).

Example
-------

下面这个简单的例子告诉你怎样分割一个双声道音轨 (或者说一段音乐), 以及对于左右声道不同的处理。要使用它们，你需要用到`AudioNode.connect(AudioNode)` (en-US)方法的第二个和第三个参数，他们会指定链接声道源的序号和链接到的声道序号。


```js
var ac = new AudioContext();
ac.decodeAudioData(someStereoBuffer, function (data) {
  var source = ac.createBufferSource();
  source.buffer = data;
  var splitter = ac.createChannelSplitter(2);
  source.connect(splitter);
  var merger = ac.createChannelMerger(2);

  // Reduce the volume of the left channel only
  var gainNode = ac.createGain();
  gainNode.gain.value = 0.5;
  splitter.connect(gainNode, 0);

  // Connect the splitter back to the second input of the merger: we
  // effectively swap the channels, here, reversing the stereo image.
  gainNode.connect(merger, 0, 1);
  splitter.connect(merger, 1, 0);

  var dest = ac.createMediaStreamDestination();

  // Because we have used a ChannelMergerNode, we now have a stereo
  // MediaStream we can use to pipe the Web Audio graph to WebRTC,
  // MediaRecorder, etc.
  merger.connect(dest);
});
```

规格
--

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createchannelsplitter |

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

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

另见
--

* Using the Web Audio API (en-US)
ViewTransition：skipTransition() 方法
==================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

`ViewTransition` 接口的 **`skipTransition()`** 方法跳过视图过渡的动画部分，但不跳过更新 DOM 的 `document.startViewTransition()` 回调函数。

语法
--


```js
skipTransition()
```

### 参数

无

### 返回值

`undefined`。

示例
--


```js
// 开始新的视图过渡
const transition = document.startViewTransition(() => displayNewImage());

// 跳过视图过渡动画，仅更新 DOM
transition.skipTransition();
```

规范
--

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-viewtransition-skiptransition |

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

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

参见
--

* 使用 View Transitions API 实现平滑、简单的过渡
ViewTransition：finished 属性
==========================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

`ViewTransition` 接口的 **`finished`** 只读属性是一个 `Promise`。会在过渡动画完成（新的页面视图对用户可见且可交互）时兑现。

仅当传递给 `document.startViewTransition()` 的回调函数抛出异常或返回的 Promise 被拒绝时，`finished` 才会被拒绝，这表示页面的新状态未被创建。

如果过渡动画无法开始，或在动画期间使用 `ViewTransition.skipTransition()` 跳过了过渡动画，那么视图过渡依旧可以到达最终状态，因此 `finished` 依旧会被兑现。

值
-

一个 promise。

示例
--

### 不同的导航使用不同的过渡效果

有时，某些导航需要特定的过渡效果，例如后退导航可能与前进导航的过渡效果不同。处理这种情况的最佳实践是在 `<html>` 元素上设置一个类名以处理过渡（使用特定的选择器应用正确的动画），然后在过渡结束后删除该类名。


```js
async function handleTransition() {
  if (isBackNavigation) {
    document.documentElement.classList.add("back-transition");
  }

  const transition = document.startViewTransition(() =>
    updateTheDOMSomehow(data),
  );

  try {
    await transition.finished;
  } finally {
    document.documentElement.classList.remove("back-transition");
  }
}
```


**备注：** `isBackNavigation` 不是内置特性；它是一个理论上存在的函数，可以使用 Navigation API (en-US) 或类似的特性实现。

规范
--

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-viewtransition-finished |

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

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

参见
--

* 使用 View Transitions API 实现平滑、简单的过渡
ViewTransition：ready 属性
=======================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

`ViewTransition` 接口的 **`ready`** 只读属性是一个 `Promise`。会在伪元素树被创建且过渡动画即将开始时兑现。

如果视图过渡无法开始，`ready` 就会被拒绝。这可能是由于错误的配置，例如重复的 `view-transition-name`，或者是因为 `Document.startViewTransition()` 的回调函数抛出异常或返回的 Promise 被拒绝。

值
-

一个 promise。

示例
--

在下面的示例中，`ready` 用于触发从用户点击位置开始的自定义圆形揭示视图过渡，动画由 Web Animations API 提供。


```js
// 保存最后一次点击事件
let lastClick;
addEventListener("click", (event) => (lastClick = event));

function spaNavigate(data) {
  // 为不支持此 API 的浏览器提供回退方案：
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // 获取点击位置，或者回退到屏幕中间
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // 获取到最远角的距离
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y),
  );

  // 开始一次视图过渡：
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // 等待伪元素创建完成：
  transition.ready.then(() => {
    // 新视图的根元素动画
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: "ease-in",
        // 指定要附加动画的伪元素
        pseudoElement: "::view-transition-new(root)",
      },
    );
  });
}
```


该动画还需要以下 CSS，以关闭默认的 CSS 动画并防止新旧视图状态以任何方式混合（新状态从旧状态上方“擦除”，而不是过渡）：


```css
::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}
```

规范
--

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-viewtransition-ready |

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

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

参见
--

* 使用 View Transitions API 实现平滑、简单的过渡
ViewTransition：updateCallbackDone 属性
====================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

`ViewTransition` 接口的 **`updateCallbackDone`** 只读属性是一个 `Promise`。当传递给 `document.startViewTransition()` 的回调函数返回的 Promise 兑现时，该 Promise 也会兑现，当回调函数返回的 Promise 被拒绝时，该 Promise 也会被拒绝。

当你不关心过渡动画的成功或失败，而只关心 DOM 是否更新以及何时更新时，`updateCallbackDone` 非常有用。

值
-

一个 promise。

示例
--


```js
// 开始新的视图过渡
const transition = document.startViewTransition(() => displayNewImage());

transition.updateCallbackDone.then(() => {
  // 响应 DOM 更新成功
});
```


参见过渡作为增强功能以获取一个有用的示例。

规范
--

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-viewtransition-updatecallbackdone |

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

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

参见
--

* 使用 View Transitions API 实现平滑、简单的过渡
WebGLRenderingContext.viewport()
================================

WebGL API 的 **`WebGLRenderingContext.viewport()`** 方法，用来设置视口，即指定从标准设备到窗口坐标的 x、y 仿射变换。

语法
--
```

void gl.viewport(x, y, width, height);
```

### 参数

`x`

`GLint` (en-US)，用来设定视口的左下角水平坐标。默认值：0。

`y`

`GLint` (en-US)，用来设定视口的左下角垂直坐标。默认值：0。

width

非负数`Glsizei` (en-US)，用来设定视口的宽度。默认值：canvas 的宽度。

height

非负数`Glsizei` (en-US)，用来设定视口的高度。默认值：canvas 的高度。

### 返回值

None.

### 异常错误

只要宽度或高度有一个为负值，`gl.INVALID_VALUE` 错误将被抛出。

样例
--

当你第一次创建 WebGL 上下文的时候，视口的大小将和 `canvas` 的大小是匹配的。然而，如果你重新改变了 `canvas` 的大小，你需要告诉 WebGL 上下文设定新的视口。在这里，你可以使用 `gl.viewport`。


```js
gl.viewport(0, 0, canvas.width, canvas.height);
```


视口的宽度和高度的设定范围是依赖于底层如何实现的。如果你要获取这个范围，你可以查询`MAX_VIEWPORT_DIMS` 常量，它将返回 `Int32Array`。


```js
gl.getParameter(gl.MAX\_VIEWPORT\_DIMS);
// e.g. Int32Array[16384, 16384]
```


如果要获取当前的视口，则可以查询`VIEWPORT` 常量。


```js
gl.getParameter(gl.VIEWPORT);
// e.g. Int32Array[0, 0, 640, 480]
```

规范
--

| Specification |
| --- |
| WebGL Specification # 5.14.4 |

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

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

另见
--

* `WebGLRenderingContext.scissor()`
* `WebGLRenderingContext.getParameter()`
WebGLRenderingContext.getSupportedExtensions()
==============================================

**`WebGLRenderingContext.getSupportedExtensions()`** 方法返回一个所有的支持 WebGL 扩展的列表。

语法
--


```js
getSupportedExtensions()
```

### 参数

无。

### 返回值

一个字符串数组，包含所有支持 WebGL 的扩展。

示例
--


```js
const canvas = document.getElementById("canvas");
gl = canvas.getContext("webgl");

const extensions = gl.getSupportedExtensions();
// Array [ 'ANGLE\_instanced\_arrays', 'EXT\_blend\_minmax', … ]
```


参见用于获得一个特定的扩展对象的 `WebGLRenderingContext.getExtension()` 方法。

WebGL 扩展
--------

所有 WebGL API 扩展都被注册在 WebGL Extension Registry 中。当前的扩展在这里列出。

规范
--

| Specification |
| --- |
| WebGL Specification # 5.14.14 |

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

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

参见
--

* `WebGLRenderingContext.getExtension()`
* webglreport.com
WebGLRenderingContext.linkProgram()
===================================


`WebGLRenderingContext` 接口的\*\*linkProgram()\*\*方法链接给定的`WebGLProgram`，从而完成为程序的片元和顶点着色器准备 GPU 代码的过程。
语法
--
```

void gl.linkProgram(program);
```

### 参数

program

一个用于链接的 `WebGLProgram` 。

### 返回值

None.

例子
--


```js
var program = gl.createProgram();

// Attach pre-existing shaders
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK\_STATUS)) {
  var info = gl.getProgramInfoLog(program);
  throw new Error("Could not compile WebGL program. \n\n" + info);
}
```

规范
--

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

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

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

参考
--

* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.deleteProgram()`
* `WebGLRenderingContext.isProgram()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()`
* `WebGLRenderingContext.getProgramParameter()` (en-US)
* `WebGLRenderingContext.getProgramInfoLog()`
WebGLRenderingContext.drawElements()
====================================

该 **`WebGLRenderingContext.drawElements()`** 方法 在 WebGL API 从数组数据渲染图元。

语法
--
```

void gl.drawElements(mode, count, type, offset);
```

### 参数

`mode`

`枚举类型` 指定要渲染的图元类型。可以是以下类型：

* `gl.POINTS`: 画单独的点。
* `gl.LINE_STRIP`: 画一条直线到下一个顶点。
* `gl.LINE_LOOP`: 绘制一条直线到下一个顶点，并将最后一个顶点返回到第一个顶点。
* `gl.LINES`: 在一对顶点之间画一条线。
* `gl.TRIANGLE_STRIP`
* `gl.TRIANGLE_FAN`
* `gl.TRIANGLES`: 为一组三个顶点绘制一个三角形。

count

`整数型` 指定要渲染的元素数量。

type

`枚举类型` 指定元素数组缓冲区中的值的类型。可能的值是：

* `gl.UNSIGNED_BYTE`
* `gl.UNSIGNED_SHORT`
* 当使用 `OES_element_index_uint` (en-US) 扩展时：
    + `gl.UNSIGNED_INT`

offset

`字节单位` 指定元素数组缓冲区中的偏移量。必须是给定类型大小的有效倍数。

### 返回值

None.

### 异常

* 如果 `mode` 不是正确值， `gl.INVALID_ENUM` 将会抛出错误异常。
* 如果`offset` 不是给定类型大小的有效倍数，`gl.INVALID_OPERATION` 将会抛出错误异常。
* 如果 `count` 是负的， `gl.INVALID_VALUE` 将会抛出错误异常。
例子
--


```js
gl.drawElements(gl.POINTS, 8, gl.UNSIGNED\_BYTE, 0);
```

规范
--

| Specification |
| --- |
| WebGL Specification # 5.14.11 |

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

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

相关参考
----

* `WebGLRenderingContext.drawArrays()`
* `OES_element_index_uint` (en-US)
WebGLRenderingContext.validateProgram()
=======================================

**`WebGLRenderingContext.validateProgram()`** 是一种 WebGL API ，主要是用来验证 `WebGLProgram`。它在检查 WebGLProgram 程序是否链接成功的同时还会检查其是否能在当前的 WebGL 中使用。

语法
--
```

void gl.validateProgram(program);
```

### 参数

program

待验证的 `WebGLProgram`。

### 返回值

None.

Examples
--------


```js
var program = gl.createProgram();

// Attach pre-existing shaders
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);
gl.validateProgram(program);

if (!gl.getProgramParameter(program, gl.LINK\_STATUS)) {
  var info = gl.getProgramInfoLog(program);
  throw "不能编译 WebGL 程序。\n\n" + info;
}

gl.useProgram(program);
```

规范
--

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

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

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

See also
--------

* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.deleteProgram()`
* `WebGLRenderingContext.isProgram()`
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.getProgramParameter()` (en-US)
* `WebGLRenderingContext.getProgramInfoLog()`
WebGLRenderingContext.createFramebuffer()
=========================================

**`WebGLRenderingContext.creatFramebuffer()`** 是 WebGL API 的一个方法，用来创建和初始化`WebGLFramebuffer` 对象。语法
--
```

WebGLFramebuffer gl.createFramebuffer();
```

### 参数

None.

### 返回值

`WebGLFramebuffer` 对象

样例
--

### 创建一个帧缓冲区


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

说明
--

| Specification |
| --- |
| WebGL Specification # 5.14.6 |

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

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

另见
--

* `WebGLRenderingContext.bindFramebuffer()`
* `WebGLRenderingContext.deleteFramebuffer()`
* `WebGLRenderingContext.isFramebuffer()` (en-US)
* Other buffers: `WebGLBuffer`, `WebGLRenderbuffer`