WebGL是内嵌在浏览器中的，你不必安装插件和库就可以直接使用他，而且，由于他是基于浏览器的，你可以在多种平台运行WebGL程序。
WebGL允许JavaScript在网页上操作和显示三维图形，有了WebGL的帮助，开发三维的客户界面，运行三维的游戏、对互联网上的海量数据进行三维可视化都成为了可能。
- 你只需要一个文本编辑器和浏览器，就可以开始编写三维图形程序了
- 你可以使用通用的Web技术发布三维图形程序，展示给你的朋友和其他的开发者。
- 你可以充分利用浏览器的功能
- 互联网上有大量现成的资料，它们可以帮助你学习WebGL，编写三维程序。
Canvas标签
我们这个系列的所有代码都是通过纯HTML代码来编写的。下面我们将定义一个canvas标签，并且将canvas的大小设置为400*400，并且在canvas内部绘制一个蓝色的矩形。下面我们来实现一下这一部分的代码
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>glsl start canvas</title>
</head>
<body onload="main()">
<canvas id="example" width="400" height="400">
please use an browser that can supports 'canvas'
</canvas>
<script src="./index.js"></script>
</body>
</html>
// index.js
function main(){
const canvas=document.getElementById('example');
if(!canvas){
console.log("please use an browser that can supports canvas!");
return;
}else{
const ctx=canvas.getContext('2d');
ctx.fillStyle='rgba(0,0,255,1)';
ctx.fillRect(120,10,150,150);
}
}
