WebGL快速入门及实例(一)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_36571185/article/details/78116527

WebGL是什么?

  1. WebGL就是web版的OpenGL。因为WebGL是基于OpengGL ES2.0设计的。
  2. webgl运行效率高。
  3. 不需要专门搭建环境。甚至用editor也能开发。不过我更推荐你用WebStorm
  4. 可移植性好。成品就是js和html
  5. 教程资源多,比opengl学习门槛低。

WebGL程序结构

Html+Js+WebGL

实例源码:

这里写图片描述
canvas:在H5之前,想在网页上实时绘制渲染除非你使用Flash,否则光凭<img>标签想实时绘制渲染?门都没有。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三角形</title>
</head>
<!--告诉浏览器body元素加载完成后再执行main函数-->
<body onload="main()">
<!--默认情况下canvas是透明的,如果不用js在上面画点啥,是看不到他的-->
<canvas id="2d_example"  width="600" height="600">你的浏览器不支持canvas标签</canvas>
<script src="DrawRectangle.js"></script>
</body>
</html>
function main() {
    //获取canvas元素
    //首先你的有块画布,你才能画三维图形吧,对吧?
    var canvas = document.getElementById('2d_example');

    if(!canvas) {
        //你的电脑是老古董吗???
        console.log("你浏览器不支持canvas");
        return;
    }
    //想画图你还得有跟笔才能画!这能理解吧?
    //正式一点说这叫请求二维图形的绘图上下文。想画3d的就改成3d
    var ctx = canvas.getContext('2d');

    //有画布,有画笔,那就先画一个蓝色矩形试试

    ctx.fillStyle = 'rgba(0,0,255,1.0)';//颜色是蓝色
    //canvas我设的是width="600" height="600"
    //(120,10)是矩形左上顶点在canvas坐标系中的位置。(150,150)是矩形的大小
    ctx.fillRect(120, 10, 150, 150);

}

2017.9.28日更新

阅读更多 登录后自动展开
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页