WebGL学习之路——1.用canvas画个矩形

最新推荐文章于 2024-10-07 09:24:46 发布

mezhaha

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量181

点赞数

文章标签： webgl javascript canvas

本文链接：https://blog.csdn.net/mezhaha/article/details/106844692

版权

从今天开始要开始我得WebGL学习之路啦。虽然还要工作，还要复习考研，但是真的对WebGL兴趣很大。每天学一点，日积月累，厚积薄发吧。在此记录我的学习之路，希望不要放弃。

学习方式：《WebGL编程指南》

认识到原来WebGL大体上和javascript+html的那一套一致。不过webgl有一个着色器语言（GLSL），但是着色器语言可以内嵌在js中。所以WebGL没有新的文件。这样来说，webgl开发又少了一个障碍啦。

WebGL用到了标签，里面有绘图函数，有了Webgl,甚至还可以搞三维。厉害了。
下面是用canvas画一个矩形。不难看出，***context***是至关重要的角色

<html>
<head>
    <title>Rectangle</title>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <canvas id='demo1'>hhhh</canvas>
</body>

</html>
<script>
    $(function () {

        //getDOM
        var canvas=document.getElementById('demo1')
        //get context
        var ctx = canvas.getContext('2d');

        //process context
        ctx.fillStyle = 'RGBA(0,255,65,1)'
        ctx.fillRect(100, 100, 200, 200)
    })
</script>