recursal/MDN huggingface dataset:
HTMLVideoElement.disablePictureInPicture
========================================

`HTMLVideoElement` 提供的 **`disablePictureInPicture`** HTML 属性用于指示是否应该向用户建议画中画的功能，或者自动请求该功能。

属性
--

一个布尔值，如果为`true`,阻止用户代理向用户建议该功能。

规范
--

| Specification |
| --- |
| Picture-in-Picture # disable-pip |

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

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

**`HTMLVideoElement`** 接口提供的 **`requestPictureInPicture()`** 方法会发出异步请求，并以画中画的模式显示视频。

该方法不能保证视频进入画中画。如果授予了进入画中画的权限，则将返回一个 `Promise`，最终完成后将收到一个 `enterpictureinpicture` 事件，来表示它现在处于画中画状态。

语法
--


```js
requestPictureInPicture()
```

### 返回值

`PictureInPictureWindow` 对象将由 `Promise` 最终完成后获得。可以用于监听用户何时调整该浮动窗口的大小。

示例
--

本示例请求视频进入画中画模式，并设置事件监听以处理窗口大小的调整。


```js
function enterPictureInPicture() {
  videoElement.requestPictureInPicture().then((pictureInPictureWindow) => {
    pictureInPictureWindow.addEventListener(
      "resize",
      () => onPipWindowResize(),
      false,
    );
  });
}
```

规范
--

| Specification |
| --- |
| Picture-in-Picture # request-pip |

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

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

参见
--

* `<video>` 元素
* `HTMLVideoElement.disablePictureInPicture`
* `Document.pictureInPictureEnabled`
* `Document.exitPictureInPicture()`
* `Document.pictureInPictureElement`
* `:picture-in-picture`
OscillatorNode.detune
=====================

`OscillatorNode` 的 `detune 属性的接口`是 a-rate `AudioParam` ，代表振荡频率的失谐量（cents）。

语法
--


```js
var oscillator = audioCtx.createOscillator();
oscillator.detune.value = 100; // value in cents
```


**备注：** 虽然返回的 `AudioParam` 是只读的，但是它表示的值不是。

### 值

一个 a-rate `AudioParam` 的值

示例
--

下面的例子使用 `AudioContext` 创建了一个 oscillator node。这是已经在运行的例子，查看 Violent Theremin demo (see app.js 是相关源码)。


```js
// create web audio api context
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// create Oscillator node
var oscillator = audioCtx.createOscillator();

oscillator.type = "square";
oscillator.frequency.value = 440; // value in hertz
oscillator.detune.value = 100; // value in cents
oscillator.start();
```

规范
--

| Specification |
| --- |
| Web Audio API # dom-oscillatornode-detune |

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

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

See also
--------

* Using the Web Audio API (en-US)
OscillatorNode.setPeriodicWave()
================================

`OscillatorNode` 接口的 **`setPeriodicWave()`** 方法用来指向 `PeriodicWave`，PeriodicWave 定义了一个周期性波形能够形成 oscillator 的输出，当`type` (en-US) 是 `custom` 的时候。

**备注：** 该方法取代了废弃的 `OscillatorNode.setWaveTable()`.

语法
--
```

OscillatorNode.setPeriodicWave(wave);
```

### 参数

`wave`

一个 `PeriodicWave` 对象，表示特定的波形用来形成 oscillator 的输出。

### 返回值

`undefined`示例
--

下面示例说明了 `createPeriodicWave() 方法的简单使用`, 从一个周期波形中重新生成了一个正弦波形。


```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);

osc.setPeriodicWave(wave);

osc.connect(ac.destination);

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


这段代码可以运行因为通过定义一个正弦波形使得声音包含了基础的音调。

这里，我们用两个值创建一个`PeriodicWave`。第一个值是直流偏移，是 oscillator 开始的时候的值。这里 0 很合适，因为我们想要在 [-1.0; 1.0] 这个范围的中间值开始。

第二个和后面的值是正弦和余弦内容。可以把它看做傅里叶变换的结果，使得可以从时间阈值得到频率阈值。这里通过 `createPeriodicWave() 方法，可以指定频率，并且浏览器执行逆傅里叶变换来得到一个时间阈值缓冲。`Here, we only set one component at full volume (1.0) on the fundamental tone, so we get a sine wave.

规范
--

| Specification |
| --- |
| Web Audio API # dom-oscillatornode-setperiodicwave |

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

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

See also
--------

* Using the Web Audio API (en-US)
* AudioContext.createPeriodicWave (en-US)
OscillatorNode.frequency
========================

`OscillatorNode` 的 `frequency 属性的接口`是 a-rate `AudioParam`，表示振荡的频率，单位 HZ（hertz）

语法
--


```js
var oscillator = audioCtx.createOscillator();
oscillator.frequency.value = 440; // value in hertz
```


**备注：** 虽然返回的 `AudioParam` 是只读的，但是它表示的值不是。

### 值

一个 a-rate `AudioParam` 的值

示例
--

下列示例使用 `AudioContext` 创建了一个 oscillator node. 这是一个用于展示的示例，查看 Violent Theremin demo (see app.js 是相关代码).


```js
// create web audio api context
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// create Oscillator node
var oscillator = audioCtx.createOscillator();

oscillator.type = "square";
oscillator.frequency.value = 440; // value in hertz
oscillator.start();
```

规范
--

| Specification |
| --- |
| Web Audio API # dom-oscillatornode-frequency |

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

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

See also
--------

* Using the Web Audio API (en-US)
OscillatorNode()
================

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

**`OscillatorNode()`** 构造器创建了一个新的 `OscillatorNode` 对象，也是 `AudioNode` 类型，表示一个周期的波形，例如正弦波，用来在不同的对象中定义其可选属性的值

如果属性的默认值可接受，也可以选择使用 `AudioContext.createOscillator()` (en-US) 工厂方法构造 `OscillatorNode` 对象。

语法
--
```

var oscillatorNode = new OscillatorNode(context, options)
```

### 参数

`context`

指向 `AudioContext` 的引用。

`options` 可选

一个用来给 oscillator node 的属性指定值得对象，该对象中省略的属性都将采用默认值

`type`

oscillator node 产生的波形的形状。可用的值有 '`sine`', '`square`', '`sawtooth`', '`triangle`' 和 '`custom`'，默认值是'sine'。

`detune`

音高微调值（cents）可以对给定的频率值进行偏移。默认值是 0.

`frequency`

周期性波形的频率 (in hertz)。默认值是 440.

`periodicWave`

任意的周期性波形，通过一个 `PeriodicWave` 对象描述。


规范
--

| Specification |
| --- |
| Web Audio API # dom-oscillatornode-oscillatornode |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSImportRule：layerName 属性
==========================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
`CSSImportRule` (en-US) 接口的 **`layerName`** 只读属性返回由 `@import` at 规则创建的层叠层的名称。

如果创建的层是匿名的，则字符串为空（`""`），如果没有创建层，则为 `null` 对象。

值
-

一个字符串，可以为空，或者是 `null` 对象。

示例
--

该文档的单个样式表包含三个 `@import` 规则。第一个声明将样式表导入到一个具名层。第二个声明将样式表导入到一个匿名层。第三个声明在没有层声明的情况下导入一个样式表。

`layerName` 属性返回与导入的样式表关联的层的名称。


```css
@import url("style1.css") layer(layer-1);
@import url("style2.css") layer;
@import url("style3.css");
```



```js
const myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].layerName); // 返回 `"layer-1"`
console.log(myRules[1].layerName); // 返回 `""`（匿名层）
console.log(myRules[2].layerName); // 返回 `null`
```

规范
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssimportrule-layername |

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

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

参见
--

* 学习区：层叠层
* `@import` 和 `@layer`
WebGL 的例子
=========

* 下一页 »

WebGL *例子*是一系列附有简短的解释的样本用来展示 WebGL 的概念和功能。这些示例根据主题和难度级别进行排序，涵盖 WebGL 渲染上下文，着色器编程，纹理，几何图形，用户交互等。

主题例子
----

这些范例是有浅到深的，它们除了是一个个可以让你实现的例子外，还和主题高度重合，当我们需要在中级和高级阶段实现这个例子时有时我们会重复此例子的基础内容。

在第一个程序中，并没有尝试着色着色器，几何图形和使用GPU 内存，这里的示例以渐进的方式探索 WebGL。我们相信它会带来更有效的学习体验，并最终更深入地理解底层概念。

有关这些例子的解释可以在代码的正文和注释中找到。你应该阅读所有注释，因为更高级的示例不会重复注释以前的代码。

### 开始了解渲染上下文

检测 WebGL

这个例子演示如何检测 WebGL 渲染上下文并且反馈给用户。

Clearing with colors

How to clear the rendering context with a solid color.

Clearing by clicking

How to combine user interaction with graphics operations. Clearing the rendering context with a random color when the user clicks.

Simple color animation

A very basic color animation, done by clearing the WebGL drawing buffer with a different random color every second.

Color masking (en-US)

Modifying random colors by applying color masking and thus limiting the range of displayed colors to specific shades.

Basic scissoring (en-US)

How to draw simple rectangles and squares with scissoring operations.

Canvas size and WebGL

The example explores the effect of setting (or not setting) the canvas size to its element size in CSS pixels, as it appears in the browser window.

Boilerplate 1

The example describes repeated pieces of code that will be hidden from now on, as well as defining a JavaScript utility function to make WebGL initialization easier.

Scissor animation

Some animation fun with scissoring and clearing operations.

Raining rectangles (en-US)

A simple game that demonstrates clearing with solid colors, scissoring, animation, and user interaction.

### Shader programming basics

Hello GLSL

A very basic shader program that draws a solid color square.

Hello vertex attributes (en-US)

Combining shader programming and user interaction through vertex attributes.

Textures from code (en-US)

A simple demonstration of procedural texturing with fragment shaders.

### Miscellaneous advanced examples

Video textures (en-US)

This example demonstrates how to use video files as textures.

* 下一页 »
WebGL 教程
========

WebGL 使得网页在支持 HTML `<canvas>` 标签的浏览器中，不需要使用任何插件，便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行 3D 渲染。WebGL 程序由 javascript 的控制代码，和在计算机的图形处理单元（GPU, Graphics Processing Unit）中执行的特效代码 (shader code，渲染代码) 组成。WebGL 元素可以和其他 HTML 元素混合，并且会和页面的其他部分或页面背景相合成。

此教程从基础开始讲解如何使用`<canvas>` 元素来画 WebGL 图形。提供的例子会让你对 WebGL 有更清晰的认识，并且会提供代码片段方便你构建自己的内容。

开始之前
----

使用 `<canvas>` 元素并不困难，但你需要基本的 HTML 和 JavaScript 知识。一些老浏览器不支持`<canvas>` 元素和 WebGL，但所有最近的主流浏览器都支持它们.。为了能在 canvas 中绘制图形，我们使用 Javascript 的上下文环境（context）对象，此对象可以动态创建图形。

在本教程中
-----

开始 WebGL

如何设置 WebGL 上下文环境。

给 WebGL 的上下文环境添加 2D 内容

如何用 WebGl 渲染简单的平面化图形。

在 WebGL 中使用着色器 (shader) 去赋予颜色

演示如何使用着色器给图形添加颜色。

用 WebGL 让对象动起来

展示如何旋转移动物体来实现简单动画效果。

使用 WebGL 创建 3D 物体

展示如何创建并设置一个 3D 物体动画 (这里使用立方体).

在 WebGL 中使用纹理贴图 (texture)

展示如何投射纹理贴图到物体的各个面。

WebGL 中的灯光

如何在 WebGL 上下文环境中模拟灯光效果。

WebGL 中的动画纹理贴图

展示如何让纹理贴图动起来; 在此例中，会投射一个 Ogg 格式的视频在一个旋转立方体的各个面上。
Data in WebGL
=============

GLSL 为 Shader 提供了三种不同作用的数据存储，每种都有一个特定的用例。每种数据依作用不同可以被一种或者全部 shader 访问（取决于数据存储类型），也可能通过站点的 Javascript 代码进行访问，这取决于变量的特定类型。

GLSL 数据类型
---------

<<关于 基本数据类型，向量等，参见 Khronos WebGL Wiki 的文档：Data Type (GLSL) >>

GLSL 变量
-------

GLSL 中有三种类型的“变量”或者说数据存储类型。每一种类型都有特定的目标和使用方法：: **attributes**、**varyings**和**uniforms**.

### Attributes

**Attributes** 可以被 JavaScript 代码操作，也可以在 vertex shader 中被作为变量访问。Attributes 通常被用于存储颜色、纹理坐标以及其他需要在 JavaScript 代码和 vertex shader 之间互相传递的数据。


```js
// init colors
const vertexColors = [
  vec4(0.0, 0.0, 0.0, 1.0), // black
  vec4(1.0, 0.0, 0.0, 1.0), // red
  vec4(1.0, 1.0, 0.0, 1.0), // yellow
  vec4(0.0, 1.0, 0.0, 1.0), // green
  vec4(0.0, 0.0, 0.0, 1.0), // black
  vec4(1.0, 0.0, 0.0, 1.0), // red
  vec4(1.0, 1.0, 0.0, 1.0), // yellow
  vec4(0.0, 1.0, 0.0, 1.0), // green
];
const cBuffer = gl.createBuffer();
```



```js
// continued
// create buffer to store colors and reference it to "vColor" which is in GLSL
gl.bindBuffer(gl.ARRAY\_BUFFER, cBuffer);
gl.bufferData(gl.ARRAY\_BUFFER, flatten(vertexColors), gl.STATIC\_DRAW);

const vColor = gl.getAttribLocation(program, "vColor");
gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vColor);
```



```cpp
//glsl
attribute  vec4 vColor;

void main()
{
  fColor = vColor;
}
```

### Varyings

**Varyings** 在 vertex shader 中定义，用于从 vertex shader 向 fragment shader 传递数据。通常传递 normal vector 等在 vertex shader 中计算生成的数据会使用 varying。

<<how to use>>

### Uniforms

**Uniform** 通常是由 JavaScript 代码设置并且在 vertex shader 和 fragment shader 中都能够访问。使用 uniform 设定在一帧的所有绘制中相同的数据，例如光源颜色、亮度、全局变换以及透视数据等等。

<<添加细节>>

Buffers
-------

<<添加信息>>

Textures
--------

<<添加信息>>
WebGL types
===========

以下是WebGL提供的接口中用到的变量类型。

WebGL 1
-------

以下类型的变量属于`WebGLRenderingContext`对象。

| 类型 | Web 接口类型 | 描述 |
| --- | --- | --- |
| `GLenum` | `unsigned long` | 用于枚举。另见 constants。 |
| `GLboolean` | `boolean` | `Boolean`型。 |
| `GLbitfield` | `unsigned long` | 一个位字段（bit field），用于存储逻辑位（bit）。例如，在 `WebGLRenderingContext.clear()`的使用。 |
| `GLbyte` | `byte` | 八位（一个字节），2 的补码表示的有符号整数。 |
| `GLshort` | `short` | 十六位 2 的补码表示的有符号整数。 |
| `GLint` | `long` | 三十二位 2 的补码表示的有符号整数。 |
| `GLsizei` | `long` | 用来描述尺寸（例如：绘画缓冲 drawing buffer 的宽和高）。 |
| `GLintptr` | `long long` | 用来表示指针的特殊类型。 |
| `GLsizeiptr` | `long long` | 用来表示指针的特殊类型。 |
| `GLubyte` | `octet` | 八位（一个字节），2 的补码表示的无符号整数。 |
| `GLushort` | `unsigned short` | 十六位 2 的补码表示的无符号整数。 |
| `GLuint` | `unsigned long` | 三十二位 2 的补码表示的有符号整数。 |
| `GLfloat` | `unrestricted float` | 三十二位的 IEEE 标准的浮点数。 |
| `GLclampf` | `unrestricted float` | 限值 32 位 IEEE 浮点数。 |

WebGL 2
-------

以下类型的变量属于 `WebGL2RenderingContext`. 所有 WebGL 1 中的类型也有使用。

| 类型 | Web 接口类型 | 描述 |
| --- | --- | --- |
| `GLint64` | `long long` | 六十四位有符号整数。 |

WebGL 扩展
--------

以下类型用在 WebGL extensions中。

| 类型 | Web 接口类型 | 描述 |
| --- | --- | --- |
| `GLuint64EXT` | `long long` | 六十四位无符号整数 |

规范
--

| Specification |
| --- |
| WebGL # 5.1 |
| WebGL2 # 3.1 |
| EXT\_disjoint\_timer\_query  |

另见
--

* `WebGLRenderingContext`
使用 WebGL 扩展
===========

WebGL，像它的姐妹 API（OpenGL 和 OpenGL ES），支持使用扩展（extension）。可在 khronos webgl extension registry 查看完整的扩展列表。

**备注：** 不像别的 GL API，在 WebGL 中，扩展只有在明确需要的情况下才会加载。

规范扩展名、供应商前缀和首选项
---------------

扩展（extension）在未被官方正式制定为标准前（但仅当它们处于草案阶段时），某些浏览器厂商可能会支持 WebGL 扩展。这样的话，扩展的名字应该加上相应的厂商前缀（`MOZ_`、`WEBKIT_` 等），否则这个扩展只能在浏览器切换了偏好设置的前提下生效。

如果你希望使用最前沿的扩展，并希望在规范被批准后可以继续使用（当然，假设扩展不会以不兼容的方式更改），你可以查询规范扩展名称以及供应商扩展名称。例如：


```js
const ext =
  gl.getExtension("OES\_vertex\_array\_object") ||
  gl.getExtension("MOZ\_OES\_vertex\_array\_object") ||
  gl.getExtension("WEBKIT\_OES\_vertex\_array\_object");
```


请注意，不鼓励使用供应商前缀，因此大多数浏览器使用功能标志（feature flag）而不是供应商前缀后面实施实验性扩展。

功能标志有：

* Firefox：`webgl.enable-draft-extensions`
* 基于 Chromium 的浏览器（Chrome、Opera）：`chrome://flags/#enable-webgl-draft-extensions`
命名约定
----

WebGL 扩展以“ANGLE”、“OES”、“EXT”、“WEBGL”为前缀。这些前缀反映了来源和意图：

* `ANGLE_`：由 ANGLE library 的作者编写的扩展。
* `OES_` 和 `KHR_`：由各自的架构审查委员会（Khronos）批准的对 OpenGL ES（OES）或 OpenGL API 扩展的功能的镜像。
* `OVR_`：针对虚拟现实进行优化的扩展。
* `EXT_`：从其他 OpenGL ES 或 OpenGL API 扩展镜像的扩展。
* `WEBGL_`：特定于 WebGL 的扩展，旨在与多种 Web 浏览器兼容。它也应该用于源自 OpenGL ES 或 OpenGL API 的扩展，但其行为已被显著改变。
查询可用的扩展程序
---------

WebGL 上下文支持查询可用的扩展。


```js
const available_extensions = gl.getSupportedExtensions();
```


`WebGLRenderingContext.getSupportedExtensions()` 方法返回一个字符串数组，每个字符串对应一个支持的扩展。

扩展列表
----

当前的扩展有：

* `ANGLE_instanced_arrays`
* `EXT_blend_minmax` (en-US)
* `EXT_color_buffer_float` (en-US)
* `EXT_color_buffer_half_float` (en-US)
* `EXT_disjoint_timer_query` (en-US)
* `EXT_float_blend` 
实验性
* `EXT_frag_depth` (en-US)
* `EXT_shader_texture_lod` (en-US)
* `EXT_sRGB` (en-US)
* `EXT_texture_compression_bptc` (en-US)
* `EXT_texture_compression_rgtc` (en-US)
* `EXT_texture_filter_anisotropic` (en-US)
* `EXT_texture_norm16` (en-US)
* `KHR_parallel_shader_compile` (en-US)
* `OES_element_index_uint` (en-US)
* `OES_fbo_render_mipmap` (en-US)
* `OES_standard_derivatives` (en-US)
* `OES_texture_float` (en-US)
* `OES_texture_float_linear` (en-US)
* `OES_texture_half_float` (en-US)
* `OES_texture_half_float_linear` (en-US)
* `OES_vertex_array_object`
* `OVR_multiview2` (en-US)
* `WEBGL_color_buffer_float` (en-US)
* `WEBGL_compressed_texture_astc` (en-US)
* `WEBGL_compressed_texture_etc` (en-US)
* `WEBGL_compressed_texture_etc1` (en-US)
* `WEBGL_compressed_texture_pvrtc` (en-US)
* `WEBGL_compressed_texture_s3tc` (en-US)
* `WEBGL_compressed_texture_s3tc_srgb` (en-US)
* `WEBGL_debug_renderer_info` (en-US)
* `WEBGL_debug_shaders` (en-US)
* `WEBGL_depth_texture` (en-US)
* `WEBGL_draw_buffers` (en-US)
* `WEBGL_lose_context`
* `WEBGL_multi_draw` (en-US)
启用扩展
----

在一个扩展可用之前，必须使用 `WebGLRenderingContext.getExtension()` 来启用它。例如：


```js
const float_texture_ext = gl.getExtension("OES\_texture\_float");
```


如果不支持扩展，则返回值为 `null`，否则为扩展对象。

扩展对象
----

如果扩展定义了 WebGL 核心规范中不可用的特定符号或函数，则它们将在调用 `gl.getExtension()` 后返回的扩展对象中可用。

参见
--

* `WebGLRenderingContext.getSupportedExtensions()`
* `WebGLRenderingContext.getExtension()`
* webglreport.com
检测 WebGL
========

* « 上一页
* 下一页 »

这个例子演示了如何通过渲染上下文来检测WebGL，并将结果报告给用户。

### WebGL 特性检测

在第一个例子中，我们将检查浏览器是否支持WebGL。为此，我们将尝试从`canvas`元素获取WebGL 渲染的上下文 。WebGL 渲染的上下文是一个接口，通过它你可以设置和查询绘图器的状态，发送数据到 WebGL，执行绘制命令。

在单个上下文接口中保存绘图器的状态并不是WebGL独有的。这在其他绘图技术里也是存在的API,比如2D 渲染上下文的 canvas。然而，你可以调整的属性和变量对于每个API来说都是不同的。


```html
<p>[ Here would go the result of WebGL feature detection ]</p>
<button>Press here to detect WebGLRenderingContext</button>
```



```css
body {
  text-align: center;
}
button {
  display: block;
  font-size: inherit;
  margin: auto;
  padding: 0.6em;
}
```



```js
// Run everything inside window load event handler, to make sure
// DOM is fully loaded and styled before trying to manipulate it.
window.addEventListener(
  "load",
  function () {
    var paragraph = document.querySelector("p"),
      button = document.querySelector("button");
    // Adding click event handler to button.
    button.addEventListener("click", detectWebGLContext, false);
    function detectWebGLContext() {
      // Create canvas element. The canvas is not added to the
      // document itself, so it is never displayed in the
      // browser window.
      var canvas = document.createElement("canvas");
      // Get WebGLRenderingContext from canvas element.
      var gl =
        canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
      // Report the result.
      if (gl && gl instanceof WebGLRenderingContext) {
        paragraph.innerHTML = "Congratulations! Your browser supports WebGL.";
      } else {
        paragraph.innerHTML =
          "Failed to get WebGL context. " +
          "Your browser or device may not support WebGL.";
      }
    }
  },
  false,
);
```


这个例子的源代码可以在GitHub上获取。

* « 上一页
* 下一页 »
清除画布
====

* « 上一页
* 下一页 »

这个例子将展示如何用一个单色清除画布

### 使用单一颜色清除 WebGl 区域

这是一个最简单的 WebGL 代码。通过rendering context设置好状态后，直接将整个区域清除为绿色。要注意 css 已经将 canvas 画布设置为黑色了，所以当画布变为绿色时，我们就知道神奇的 WebGL 魔法起作用了！

此外，你需要注意用单色绘制图像是两个步骤：首先，通过使用`clearColor()`设置清除色为绿色。这只会改变 Webgl 内部的一个状态，但并不会绘制任何东西。接下来，我们就真的开始绘制了，使用`clear()`方法，这是一个典型的用 webgl 绘制的方法，webgl 实际上只有少数的几个绘制方法 (clear() 就是其中之一)。其他方法大多都是类似设置或改变 WebGl 状态和变量的（例如设置 clearcolor）。

这里有许多属性和方法作用于 Webgl，清除方法只是你第一个掌握的，这也就是为什么 WebGL／OpenGl 经常被叫做状态机，通过调整这些属性和方法可以修改 WebGL 内部的状态，从而进行输出（例如先设置好绿色，在清除画布的时候像素点都变成了绿色）

最后，我们知道在 WebGl 中颜色格式是由 RGBA（红，绿，蓝，透明度）组成的，因此 clearColor() 方法接受四个参数


```html
<p>A very simple WebGL program that shows some color.</p>
<!-- Text within a canvas element is displayed
 only if canvas is not supported. -->
<canvas>Your browser does not seem to support HTML5 canvas.</canvas>
```



```css
body {
  text-align: center;
}
canvas {
  display: block;
  width: 280px;
  height: 210px;
  margin: auto;
  padding: 0;
  border: none;
  background-color: black;
}
```



```js
// Run everything inside window load event handler, to make sure
// DOM is fully loaded and styled before trying to manipulate it,
// and to not mess up the global scope. We are giving the event
// handler a name (setupWebGL) so that we can refer to the
// function object within the function itself.
window.addEventListener(
  "load",
  function setupWebGL(evt) {
    "use strict";

    // Cleaning after ourselves. The event handler removes
    // itself, because it only needs to run once.
    window.removeEventListener(evt.type, setupWebGL, false);

    // References to the document elements.
    var paragraph = document.querySelector("p"),
      canvas = document.querySelector("canvas");

    // Getting the WebGL rendering context.
    var gl =
      canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

    // If failed, inform user of failure. Otherwise, initialize
    // the drawing buffer (the viewport) and clear the context
    // with a solid color.
    if (!gl) {
      paragraph.innerHTML =
        "Failed to get WebGL context. " +
        "Your browser or device may not support WebGL.";
      return;
    }
    paragraph.innerHTML = "Congratulations! Your browser supports WebGL. ";
    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
    // Set the clear color to darkish green.
    gl.clearColor(0.0, 0.5, 0.0, 1.0);
    // Clear the context with the newly set color. This is
    // the function call that actually does the drawing.
    gl.clear(gl.COLOR\_BUFFER\_BIT);
  },
  false,
);
```


这个例子的代码可以在 GitHub 上下载。

* « 上一页
* 下一页 »
Clearing by clicking
====================

* « 上一页
* 下一页 »

此示例演示了如何通过用户单击时用随机颜色渲染上下文来将用户交互与 WebGL 图形操作结合起来。

### 用随机颜色渲染上下文

这个例子提供了一个简单的例子，说明如何结合 WebGL 和用户交互。每次用户点击画布或按钮时，画布都会使用一种新的随机色。

注意我们如何在事件处理函数中嵌入 WebGL 函数调用。


```html
<p>
  A very simple WebGL program that still shows some color and user interaction.
</p>
<p>
  You can repeatedly click the empty canvas or the button below to change color.
</p>
<canvas id="canvas-view"
 >Your browser does not seem to support HTML5 canvas.</canvas
>
<button id="color-switcher">Press here to switch color</button>
```



```css
body {
  text-align: center;
}
canvas {
  display: block;
  width: 280px;
  height: 210px;
  margin: auto;
  padding: 0;
  border: none;
  background-color: black;
}
button {
  display: inline-block;
  font-size: inherit;
  margin: auto;
  padding: 0.6em;
}
```



```js
window.addEventListener(
  "load",
  function setupWebGL(evt) {
    "use strict";

    // Cleaning after ourselves. The event handler removes
    // itself, because it only needs to run once.
    window.removeEventListener(evt.type, setupWebGL, false);

    // 给 canvas 和 button 添加相同的时间处理器
    var canvas = document.querySelector("#canvas-view");
    var button = document.querySelector("#color-switcher");
    canvas.addEventListener("click", switchColor, false);
    button.addEventListener("click", switchColor, false);

    // 存放 WebGLRenderingContext 的变量
    var gl;

    // 点击事件处理器
    function switchColor() {
      // Referring to the externally defined gl variable.
      // If undefined, try to obtain the WebGLRenderingContext.
      // If failed, alert user of failure.
      // Otherwise, initialize the drawing buffer (the viewport).
      if (!gl) {
        gl =
          canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
        if (!gl) {
          alert(
            "Failed to get WebGL context.\n" +
              "Your browser or device may not support WebGL.",
          );
          return;
        }
        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
      }
      // 使用辅助函数获取一种随机色
      var color = getRandomColor();
      // 用随机色设置底色
      gl.clearColor(color[0], color[1], color[2], 1.0);
      // Clear the context with the newly set color. This is
      // the function call that actually does the drawing.
      gl.clear(gl.COLOR\_BUFFER\_BIT);
    }

    // 随机颜色辅助函数
    function getRandomColor() {
      return [Math.random(), Math.random(), Math.random()];
    }
  },
  false,
);
```


这个例子的代码可以在 GitHub 上下载。

* « 上一页
* 下一页 »