webgl(一)：开发环境配置
程序员文章站
2022-03-10 17:06:43
...
1、开发工具
Google浏览器设置支持webgl :
.
1：打开浏览器并输入 about:flags
2：把第一个选项修改为 Enabled
2、webgl简介
WebGL是一种免费的、开放的、跨平台的技术；WebGL派生于OpenGL ES，后者是专用于嵌入式计算机、智能 手机、家用游戏机等设备；WebGL基于OpenGL ES 2.0。下图显示了OpenGL、OpenGL ES 和WebGL的关系
- 从OpenGL2.0版本开始，OpenGL支持了一项非常重要的特性，即可编程着色器方法。该特性被OpenGL ES 2.0继承，并成为了WebGL 1.0标准的核心部分。
- 着色器，使用一种类似于C的编程语言实现了精美的视觉效果。编写着色器的语言又称为着色器语言。WebGL基于OpenGL ES 2.0，使用GLSL ES语言编写着色器。
- 开发却异常简单：只需要一个文本编辑器（Notepad或webstorm）和一个浏览器（Google）即可；并且不需要去搭建开发环境，因为WebGL是内嵌在浏览器中的。
3、用Canvas绘制一个四边形
1、canvas简介
HTML5引入了标签，允许JavaScript动态地绘制图形，并且不需要按照任何插件。标签定义了网页上的绘图区域，有了,就可以使用JavaScript（而不是画笔和颜料）绘制任何你想话的东西。提供了一些简单的绘图函数，用来绘制点、想、矩形、圆等；
2、绘制四边形
下面我们利用画个矩形，并用红色填充；为了在上绘制二维图形，需经过以下几个步骤：
1） 创建<canvas>标签，指定绘图范围。
2 ）利用JavaScript获取到<canvas>标签。
3 ）向该标签请求二维图形的“绘图上下文”。
4 ）使用绘图上下文调用相应的绘图函数，绘制二维图形。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Draw a red rectangle </title>
<script>
function main() {
//【2】获取<canvas>标签
var canvas = document.getElementById("myCanvas");
//如果没找到<canvas>标签，则输出错误信息
if (!canvas) {
console.log('Failed to retrieve the <canvas> element.');
return;
}
//【3】获取绘图上下文，“2d”代表我们要绘制二维图形。
var ctx = canvas.getContext("2d");
//fillstyle：设置或返回用于填充绘画的颜色、渐变或模式；这里我们设置填充颜色为红色。
ctx.fillStyle = "rgba(255,0,0,1.0)";
/*
【4】使用填充颜色填充矩形。
fillRect(x,y,width,height)
x 矩形左上角的 x 坐标
y 矩形左上角的 y 坐标
width 矩形的宽度
height 矩形的高度
*/
ctx.fillRect(120, 10, 150, 150);
}
</script>
</head>
<!--页面加载完成后，执行JavaScript中的main()函数-->
<body onload="main()">
<!-- 【1】 定义<canvas>标签，通过width属性和height属性规定它是一片400×400的绘制区域-->
<canvas id="myCanvas" width="400" height="400">
<!--当浏览器不支持时，会直接忽略<canvas>标签，而直接显示下面这一行提示-->
Please use a browser that supports "canvas".
</canvas>
</body>
</html>
运行效果如图: