1、坐标系统
我们如果学过canvas2D绘图后,都知道canvas的坐标系以及canvas2D绘制的图形,对于复杂的三维物体,canvas2D显然不能满足需求,那就需要今天的主角------webgl,webgl提供了丰富的API,可以绘制各种各样复杂的三维立体效果,主要用于网页端三维可视化开发。 与二维的canvas画布不同,webgl的坐标系的原点位于canvas中心,坐标系统有三个分量,分别是x轴,y轴和z轴,具体的不同,直接上图
canvas二维坐标系
webgl坐标系
2、canvas画布
步骤
创建canvas画布没有什么变化,还是两个步骤
1、获取canvas元素
dart
// 获取canvas元素
const canvas = document.querySelector("canvas")
2、获取上下文
arduino
// 获取上下文
const gl = canvas.getContext("webgl")
3、设置画布背景颜色
gl.clearColor()方法用于设置清空颜色缓冲时的颜色值,这里我认为通俗的说就是设置canvas画布的背景颜色
scss
// 设置背景颜色(r,g,b,a) 参数要求为浮点数
// gl.clearColor(red, green, blue, alpha)
gl.clearColor(1.0,0.0,0.0,1.0)
4、清屏
scss
// 清屏
gl.clear(gl.COLOR_BUFFER_BIT);
示例
创建一个400×400像素大小的canvas画布,居中显示并设置背景为红色
代码
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>基础模板</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
overflow: hidden;
}
canvas {
display: block;
width: 400px;
height: 400px;
margin: 0 auto;
border: 1px solid red;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
// 获取canvas
const canvas = document.querySelector("canvas");
// 获取上下文
const gl = canvas.getContext("webgl");
// 设置canvas画布颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 清屏
gl.clear(gl.COLOR_BUFFER_BIT);
</script>
</body>
</html>
总结: 对于canvas画布的初始化记住以上几个步骤就可以了,对于步骤3和步骤4不理解也没关系,先记住这几个步骤。
写在最后:作者技术水平有限,如文章有误,请指出,谢谢~