国內一级黄色视频|少妇91导航日韩第一页久久|黄色三A视频色爽网站|亚洲精品 无码一区二区在直播间|成人高清国产无码|aaa成人免费视频|国产一级一片免费播放放a|我要看免费的毛片|动漫a片免费观看|日韩欧美国产视频

1.在html中建立canvas 畫(huà)布

2.在js中獲取canvas畫(huà)布

const canvas=document.getElementById('canvas’);

3.使用canvas 獲取webgl 繪圖上下文

const gl=canvas.getContext('webgl’);

4.指定將要用來(lái)清空繪圖區(qū)的顏色

gl.clearColor(0,0,0,1);

5.使用之前指定的顏色，清空繪圖區(qū)

gl.clear(gl.COLOR_BUFFER_BIT);

整體代碼如下圖

css 中有一個(gè)“rgba(255,255,255,1)” 顏色，其中r、g、b的定義域是[0,255]，這里要和webgl里的顏色區(qū)分一下。

我們可以簡(jiǎn)單了解一下將css顏色解析為webgl 顏色的原理：

const rgbaCSS = "rgba(255,0,0,1)";

const reg = RegExp(/\((.*)\)/);

const rgbaStr = reg.exec(rgbaCSS)[1];

const rgb = rgbaStr.split(",").map((ele) => parseInt(ele));

const r = rgb[0] / 255;

const g = rgb[1] / 255;

const b = rgb[2] / 255;

const a = rgb[3];

gl.clearColor(r, g, b, a);

gl.clear(gl.COLOR_BUFFER_BIT);

在three.js 里有一個(gè)非常完美的顏色對(duì)象-Color，我們可以通過(guò)這個(gè)對(duì)象可以輕松的控制顏色。

webgl畫(huà)布的建立和獲取，和canvas 2d是一樣的。

一旦我們使用canvas.getContext()方法獲取了webgl 類型的上下文對(duì)象，那這張畫(huà)布就不再是以前的canvas 2d 畫(huà)布。

canvas 2d 畫(huà)布和webgl 畫(huà)布使用的坐標(biāo)系都是二維直角坐標(biāo)系，只不過(guò)它們坐標(biāo)原點(diǎn)、y 軸的坐標(biāo)方向，坐標(biāo)基底都不一樣了。

3.1、canvas 2d畫(huà)布的坐標(biāo)系

canvas 2d 坐標(biāo)系的原點(diǎn)在左上角。

canvas 2d 坐標(biāo)系的y 軸方向是朝下的。

canvas 2d 坐標(biāo)系的坐標(biāo)基底有兩個(gè)分量，分別是一個(gè)像素的寬和一個(gè)像素的高，即1個(gè)單位的寬便是1個(gè)像素的寬，1個(gè)單位的高便是一個(gè)像素的高。

3.2、webgl的坐標(biāo)系

webgl坐標(biāo)系的坐標(biāo)原點(diǎn)在畫(huà)布中心。

webgl坐標(biāo)系的y 軸方向是朝上的。

webgl坐標(biāo)基底中的兩個(gè)分量分別是半個(gè)canvas的寬和canvas的高，即1個(gè)單位的寬便是半個(gè)個(gè)canvas的寬，1個(gè)單位的高便是半個(gè)canvas的高。