使用Canvas API可以創(chuàng)建許多種應(yīng)用：圖形、圖表、圖片編輯等，然而最奇妙的一個應(yīng)用 是修改或者覆蓋已有內(nèi)容。最流行的覆盞圖被稱為熱點圖。雖然熱點圖聽起來是度量溫度的意思， 不過這里的熱度可以用于任何可測量的活動。地圖上活躍程度髙的部分使用暖色標(biāo)記(例如紅色、 黃色或白色)，活躍程度低的部分不顯示顏色變化，或者顯示淺淺的黑色或灰色。

舉個例子，熱點圖可以用在城市地圖上來標(biāo)記交通路況，或者在世界地圖上顯示風(fēng)暴的活動情況。

    在HTML5中這些應(yīng)用都非常容易實現(xiàn)，只需要將carwas疊放在地圖上顯示即可。實際上 就是用canvas覆蓋地圖，然后再基于相應(yīng)的活動數(shù)據(jù)繪制出不同的熱度級別。

    現(xiàn)在，我的使用已經(jīng)學(xué)過的Canvas API知識來繪制一個簡單的熱點圖。這個示例中，熱度 數(shù)據(jù)不是來源于外部，而是來廉于我們的鼠標(biāo)在地圖上的移動情況?鼠標(biāo)移動到某個區(qū)域，會使 這個區(qū)域的“熱度”增加。將鼠標(biāo)放在特定區(qū)域不動會讓該區(qū)域“溫度”迅速增長至極限。為了 示范，我們將在一個“難以名狀”的地圖上進(jìn)行熱點圖的覆蓋演示。