更多分类
麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

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篇

相关阅读

麻辣GIS-Sailor

作者:

GIS爱好者,学GIS,更爱玩GIS。

声明

1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。

手机阅读
公众号关注
B站关注
手机阅读
麻辣GIS微信公众号关注
最新GIS干货
麻辣GIS小破B站
有趣的技术视频

留言板(小编看到第一时间回复)