WebGL入门

前言

WebGL采用HTML5中的新特性canvas，canvas不仅能绘制二维图形，当然也可以处理三维图形。

canvas

canvas可以理解为画布，或者就是我们平时画画用的那张纸。HTML中<canvas>标签定义了网页上的绘图区域。

    <!-- 定义一个520*520的画布 -->
    <canvas id="demo" width="520" height="520" />

既然画布已经准备好了，现在来看看怎么在画布上展现你的想法了。

    function drawRectangle() {
        const canvas = document.getElementById('demo');

        // 获取绘制二维图形的绘图上下文
        const ctx = canvas.getContext('2d');

        // 设置填充颜色
        ctx.fillStyle = 'rgba(0, 0, 255, 1.0)';
        // 使用填充颜色填充矩形
        ctx.fillRect(120, 10, 150, 150);
    }

canvas不能直接提供绘图方法，而是提供上下文机制来进行绘图。上下文，以前上学的时候倒是经常听到或者看到这个词，根据上下文进行总结什么的。不就是根据文章提取有用的信息吗？那么这里的canvas上下文也是同样的道理，即canvas上可用的属性，方法的一个提取汇总，那么我在用的时候就只需要在上下文中直接去提取，这样是不是要好理解许多了。fillStyle应该很好理解，就不再解释了，fillRect方法参数前两个为canvas坐标系中矩形左上顶点坐标(120, 10),后两个参数指定矩形的宽高。看到坐标系，是不是想到了web的坐标系，这两个坐标系是的坐标轴方向相同，原点不同，canvas坐标系原点在画布区域左上顶点，后边还会涉及到WebGL坐标系，图片的对比以及之间的相互转换就放在理解WebGL坐标系的时候一起处理。

有了对canvas的了解，那么从下篇文章开始就正式进入WebGL绘图。

WebGL学习之路——WebGL入门

WebGL入门

前言

canvas