WebGL学习——手动绘制一个图形

thehighest_a

已于 2023-05-03 23:42:29 修改

阅读量299

点赞数

文章标签： webgl 学习 java

于 2023-05-03 23:32:34 首次发布

本文链接：https://blog.csdn.net/thehighest_a/article/details/130478662

版权

1.添加一个画布元素

2.获取画布元素

3.创建一个WebGLRenderingContext对象作为3D渲染的上下文

4.绘制图形

代码：

<body>

    <canvas id="webglCanvas" width="500" height="500"></canvas>

    <script type="text/javascript">

        //获取画布元素

        var cvs = document.getElementById("webglCanvas");

        //获取画布上下文

        var webgl = cvs.getContext("webgl");

        //设置绘制图形填充的颜色

        webgl.clearColor(1.0,1.0,0.0,1.0);

        //调用缓存中值填充图形

        webgl.clear(webgl.COLOR_BUFFER_BIT);

    </script>   

</body>

getContext()方法

var ctx = canvas.getContext（contextType）;

var ctx = canvas.getContext（contextType，contextAttributes）;

contextType参数有以下四种：

“2d”,创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。
“webgl”(或“experimental-webgl”),创建一个WebGLRenderingContext对象作为3D渲染的上下文，只在实现了WebGL 2的浏览器上可用，实验性特性。
“webgl2”,创建一个WebGL2RenderingContext对象作为3D渲染的上下文，只在实现了WebGL 3的浏览器上可用。
“bitmaprenderer”，创建一个ImageBitmapRenderingContext，用于将位图渲染到canvas上下文上，实验性特性。