WebGL编程指南学习——01

最新推荐文章于 2024-02-02 15:00:50 发布

qq_53979889

最新推荐文章于 2024-02-02 15:00:50 发布

阅读量398

点赞数

文章标签：前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/qq_53979889/article/details/128981831

版权

要在前端页面上显示一些内容会用到HTML5、JavaScript这些技术，但是这些仅仅只能支持在网页上绘制二维的图形，而WebGL的引入则使我们能在网页上显示和操作三维图形。同样我们只需要一个文本编辑器和一个浏览器就能开始编写三维图形程序。

WebGL的技术规范继承自免费和开源的OpenGL标准，而后者再计算机图形学、电子游戏、计算机辅助设计等领域已被广泛使用多年。在某种意义上，WebGL就是"Web版的OpenGL"。而OpenGL在过去的20年中被用于到各种平台，能够找到很多资料进行学习，而我本人本科专业为软件工程，也不曾涉及到图形学方面当然也没有学习过OpenGL后面会抽空专门学习一下这部分内容。共同进步

WebGL编程指南这本书基本上是很多从事WebGL前端开发的启蒙书籍，记录整理一下所学内容，方便以后温故而知新。

第一章主要介绍点在于webgl除了需要我们熟知的HTML5、Javascript、CSS以外加入了GLSL着色器语言

HTML5引入了canvas标签，允许动态的绘制图形。通常称之为“画布”也就是在这个画布上画你所需要的图形

获取canvas元素

向该元素请求二维图形的上下文

再绘图上下文上调用相应的绘图函数，绘制二维图形

示例1——绘制一个矩形 HTML文件用script标签引入所需的绘制矩形的函数该函数的main方法即为页面入口

<!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>Document</title>
</head>
<body onload = "main()">
    <canvas id = "webgl" width="400" height="400"></canvas>
    <script src="DrawRectangle.js"></script>
</body>
</html>

DrawRectangle.js
function main() {
    //获取canvas元素
    var canvas = document.getElementById("webgl");
    if(!canvas){
        //如果获取不到canvas对象则输出提示语句
        console.log('Failed to retrieve the <canvas> exement');
        return;
    }
    //获取绘制二维图形的绘图上下文
    var ctx = canvas.getContext('2d');
    //绘制蓝色的矩形
    ctx.fillStyle = 'rgba(0,0,255,1.0)';//设置填充色为蓝色
    ctx.fillRect(120,10,150,150);//使用填充颜色填充矩形
}