利用canvas和javascript，就可以在页面绘制2d图像，但对于3d的图像，目前是无能为力的。要绘制3d图像，就必须使用WebGL。
以我的理解，WebGL是内嵌在浏览器中，在使用时是通过javascript调用浏览器提供的WebGL API，然后在canvas绘图区绘制图像。刚开始接触WebGL时，没有理解这一点，于是觉得代码怎么会写得这么麻烦，重重复复的写一堆就为一个简单的的功能。
下面是一个最简单的WebGL例子
<!DOCTYPE html>
<html lang=‘zh-cmn-Hans‘>
<head>
<meta charset=‘utf-8‘ />
<title>Canvas - WebGL</title>
</head>
<body>
<h1>HTML5 - Canvas - WebGL</h1>
<canvas id=‘glcanvas‘ width=‘500‘ height=‘500‘></canvas>
<script type="text/javascript">
window.onload = function(){
init();
}
function init() {
var canvas, gl;
canvas = document.getElementById(‘glcanvas‘);
gl = canvas.getContext(‘webgl‘) || canvas.getContext(‘experimental-webgl‘); //获取WebGL绘图上下文
if (!gl) {
console.log(‘不支持WebGL！‘);
return;
}
gl.clearColor(0.0, 0.0, 0.0, 1.0); //设置背景色
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); //清空绘图区
}
</script>
</body>
</html>
需要注意的是，在WebGL中，颜色RGBA中的值是使用浮点数的，其大小是从0.0到1.0，比如红色是：(1.0, 0.0, 0.0, 1.0)
时间： 2024-10-03 20:07:22