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

1.在html中建立canvas 畫布

2.在js中獲取canvas畫布

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

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

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

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

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

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

gl.clear(gl.COLOR_BUFFER_BIT);

整體代碼如下圖

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

我們可以簡單了解一下將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 里有一個非常完美的顏色對象-Color，我們可以通過這個對象可以輕松的控制顏色。

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

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

canvas 2d 畫布和webgl 畫布使用的坐標系都是二維直角坐標系，只不過它們坐標原點、y 軸的坐標方向，坐標基底都不一樣了。

3.1、canvas 2d畫布的坐標系

canvas 2d 坐標系的原點在左上角。

canvas 2d 坐標系的y 軸方向是朝下的。

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

3.2、webgl的坐標系

webgl坐標系的坐標原點在畫布中心。

webgl坐標系的y 軸方向是朝上的。

webgl坐標基底中的兩個分量分別是半個canvas的寬和canvas的高，即1個單位的寬便是半個個canvas的寬，1個單位的高便是半個canvas的高。