使用Canvas API可以創(chuàng)建許多種應用:圖形、圖表、圖片編輯等,然而最奇妙的一個應用 是修改或者覆蓋已有內(nèi)容。最流行的覆盞圖被稱為熱點圖。雖然熱點圖聽起來是度量溫度的意思, 不過這里的熱度可以用于任何可測量的活動。地圖上活躍程度髙的部分使用暖色標記(例如紅色、 黃色或白色),活躍程度低的部分不顯示顏色變化,或者顯示淺淺的黑色或灰色。
舉個例子,熱點圖可以用在城市地圖上來標記交通路況,或者在世界地圖上顯示風暴的活動情況。
在HTML5中這些應用都非常容易實現(xiàn),只需要將carwas疊放在地圖上顯示即可。實際上 就是用canvas覆蓋地圖,然后再基于相應的活動數(shù)據(jù)繪制出不同的熱度級別。
現(xiàn)在,我的使用已經(jīng)學過的Canvas API知識來繪制一個簡單的熱點圖。這個示例中,熱度 數(shù)據(jù)不是來源于外部,而是來廉于我們的鼠標在地圖上的移動情況?鼠標移動到某個區(qū)域,會使 這個區(qū)域的“熱度”增加。將鼠標放在特定區(qū)域不動會讓該區(qū)域“溫度”迅速增長至極限。為了 示范,我們將在一個“難以名狀”的地圖上進行熱點圖的覆蓋演示。