实战入门Canvas

最近实在太忙，实在没时间写文章，在此表示抱歉。今天给大家代码一篇前端Canvas开发实战（你要知道WebGIS中很多图层覆盖物等元素都是通过Canvas渲染的，因为我们经常调用常用的API，如OpenLayer或Leaflet，并不知晓其源码中逻辑道理，学会了Canvas或SVG,为后续看懂常用地图前端框架，将大有帮助）。以下直接上图：

 

前几天工作上遇到了一个新需求：绘制如上图多个柱体连接在一起（每个柱体可以代表各种储水设施，同时用三角形角标，柱体内部填充色柱体表示实时水位）。

1、接到此任务后，我结合以往经验，绘制这种柱体（2.5d）,应该可以用SVG,Canvas，OSMBuildings,甚至Cesium或Three.js。

2、以上几个方案都进入我的脑海，经过分析，对比这几种选型的优劣势Cesium或Three.js是基于WebGL库的前端框架（低版本的IE浏览器不支持），做这么一个轻量级的功能，每必要搞个这么大引用包，得不偿失。所以这个方案PASS。

3、前段时间刚好接触了OSMBuildings，也写些相关代码，但它是基于已有空间坐标。针对一个纯前台页面，我需要研究源码后写扩展，这也太费力，故PASS。

4、最后剩余SVG和Canvas，刚好之前用leaflet扩展写过一个点label多行显示的功能，故选择用Canvas绘制（站在巨人的肩膀上）。

 

开发过程：

请详见我的微信公众号

一位更懂IT的GISER，一位更懂GIS的IT

var canvas = document.getElementById("canvas"),

    ctx = canvas.getContext("2d");