最近實在太忙，實在沒時間寫文章，在此表示抱歉。今天給大家代碼一篇前端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");