WebGL学习笔记之使用Canvas

这不是WebGL的笔记吗？为什么要用Canvas？

为什么要用Canvas？

WebGL是基于Canvas这个标签在浏览器中运行的。

也就是说，我们常见的Canvas标签除了在GIS中绘制底图之外，还是WebGL功能的载体。

那是不是说要学WebGL，就必须学Canvas？倒也不必，WebGL中主要的功能是还是其实自有的着色器语言系统，相关的Canvas可以在一边学习WebGL的过程中补充进来。

第一个示例

核心代码：

function main(params) {
    const canvas = document.getElementById('rect');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'rgba(0, 0, 255, 1.0)';
    ctx.fillRect(120, 10, 150, 150)
}

详细代码：

https://github.com/sailor103/LearningWebGL/tree/master/src/1-rectangle

示例

运行结果如图：

代码解释

1. 创建一个Canvas对象，并设置宽高。
2. 创建一个2D绘图上下文，并设置填充颜色。
3. 绘制一个矩形。

后续WebGL用到的会与之相似，只不过创建的不是2D绘图上下文，而是WebGL绘图上下文。

PS: 本文的实现中没有使用WebGL，而是使用Canvas！！！！这只是先看一下使用Canvas的方式哦。

Web 3D GIS 之WebGL全部教程

---->新手的 Web 3D GIS 学习笔记之WebGL篇