1、webgl概述
1、概述
博客 webgl 示例大部分基于《 webg l编程指南》一书而来，所以你也可以直接去看这本书，如果书中有些代码运行失败的话，再来看这个博客的 webgl 系列，或许对你有些帮助
是一项用来在网页上绘制和渲染辅助三维图形，并允许用户交互的技术，它结合js和h5能更容易和直接的在互联网上展示产品和示例。
开发者不需要具备C或者C++编程语言，仅仅需要会简单的HTML和JS脚本知识就可以上手。
webgl基于浏览器不是基于操作系统，因此不需要安装插件和库，就可以运行webgl程序。
2、起源
webgl起源与OpenGL ES 2.0，OpenGL 2.0版本支持了可编程着色器，该特性被OpenGL ES 2.0继承，并成为webgl的核心。
因此webgl有三种所语言开发，HTML、JavaScript、GLSL ES。GLSL ES内嵌在JavaScript中。
3、基础示例
使用canvas绘制三维图形，没有webgl之前，只能使用canvas二维图形，因此需要了解一下canvas的绘图机制。
如果不了解可以先去学习一下 http://wangdoc.com/webapi/canvas.html
4、使用canvas绘制一个矩形
默认情况下，canvas是透明的，示例所有代码可以从码云 Gitee上获取，如果你没有的话可以先申请一个，由于国内github访问速度较慢，建议优先使用Gitee
代码仓库地址: https://gitee.com/ithanmang/webgl-notes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 canvas 绘制一个矩形</title>
<link rel="stylesheet" href="../css/common.css">
</head>
<body>
<canvas id="example" width="512" height="512"></canvas>
</body>
<script>
// 获取canvasDOM元素
var canvas = document.getElementById('example');
// 获取2D绘图上下文对象
var ctx = canvas.getContext('2d');
console.log(ctx);
// 获取canvas的宽高
var w = ctx.canvas.width;
var h = ctx.canvas.height;
// 填充颜色值
ctx.fillStyle = 'rgba(255, 0, 255, 0.5)';
// 绘制矩形
ctx.fillRect(w /2 - 200, h / 2 - 100, 400, 200);
</script>
</html>
807
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
