【愚公系列】2023年12月 WEBGL专题-入门
🏆 作者简介，愚公搬代码
🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，51CTO博客专家等。
🏆《近期荣誉》：2023年华为云十佳博主，2022年CSDN博客之星TOP2，2022年华为云十佳博主等。
🏆《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏
🚀前言
Canvas绘制图形和WebGL绘制图形在很多方面是不同的。
-
技术实现：Canvas是使用2D上下文进行图形绘制，而WebGL是使用OpenGL ES进行3D图形绘制。
-
图形能力：Canvas可以绘制简单的2D图形，如直线、矩形、圆形和文字等。而WebGL可以进行更高级的3D图形渲染，包括复杂的几何体、光照效果和纹理映射等。
-
性能：Canvas绘制图形的性能相对较低，特别是在处理复杂图形和大量图形时。而WebGL利用硬件加速，可以实现更高的绘制性能。
-
API和语法：Canvas使用简单的2D绘图API，如绘制路径、填充颜色和设置样式等。而WebGL使用OpenGL ES的API，包括顶点着色器、片段着色器和缓冲区对象等。
Canvas适合进行简单的2D图形绘制，如数据可视化和简单的游戏界面等。而WebGL适合进行复杂的3D图形渲染，如实时渲染和虚拟现实等。
🚀一、入门
🔎1.canvas绘制图形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" width="400" height="400">
此浏览器不支持canvas
</canvas>
</body>
</html>
<script>
const ctx = document.getElementById('canvas')
const c = ctx.getContext('2d')
c.fillStyle = 'red'
c.fillRect(10,10,100,100)
</script>
🔎2.webgl绘制图形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebGL Clear Example</title>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');
// Set the clear color (black in this case)
gl.clearColor(1, 0, 0, 1);
// Clear the color buffer bit and depth buffer bit
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
</script>
</body>
</html>
在这个示例中，我们首先获取了 canvas 元素和 WebGL 上下文对象 gl。然后，使用 gl.clearColor 方法来设置画布的清除颜色为红色。最后，通过 gl.clear 方法来清除画布的颜色缓冲区和深度缓冲区。
注意，gl.clear 方法的参数可以是 gl.COLOR_BUFFER_BIT，gl.DEPTH_BUFFER_BIT 或它们的组合。在示例中，我们使用了 gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT 来同时清空颜色和深度缓冲区。
gl.clear 需要和 gl.clearColor 提到的函数搭配使用
- gl.clearColor(r,g,b,a)：指定清空
<canvas>的颜⾊，接收四个参数（取值区间为 0.0~1.0） - gl.clear(buffer)：清空 canvas参数分为三项
- gl.COLOR_BUFFER_BIT 清空颜色缓存
- gl.DEPTH_BUFFER_BIT 清空深度缓冲区
- gl.STENCIL_BUFFER_BIT 清空模板缓冲区
- gl.clear(gl.COLOR_BUFFER_BIT) 和 gl.clearColor(0.0,0.0,0.0,1.0)
- gl.clear(gl.DEPTH_BUFFER_BIT) 和 gl.clearDepth(1.0)
- gl.clear(gl.STENCIL_BUFFER_BIT) 和 gl.clearStencil(0)
🚀感谢：给读者的一封信
亲爱的读者，
我在这篇文章中投入了大量的心血和时间，希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验，我相信这些信息对您非常有帮助。
如果您觉得这篇文章对您有所帮助，我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担，但它会对我继续创作高质量的内容产生积极的影响。
我之所以写这篇文章，是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命，也鼓励我花更多的时间和精力创作更多有价值的内容。
如果您愿意支持我的创作，请扫描下面二维码，您的支持将不胜感激。同时，如果您有任何反馈或建议，也欢迎与我分享。
再次感谢您的阅读和支持！
最诚挚的问候， “愚公搬代码”
- 点赞
- 收藏
- 关注作者
评论（0）