No.1 繪圖功能（Canvas、SVG）

這是H5一個(gè)非常重要的特性，你在很多H5中看到的動(dòng)畫(huà)效果就是用H5的繪圖功能做的，比較典型的例子是STC風(fēng)云榜分享的可口可樂(lè)的例子，有興趣可以點(diǎn)擊最后的“閱讀原文”看一下。

為了方便理解，你可以將H5的繪圖功能類比為Flash，但是唯一的決定性區(qū)別是，F(xiàn)lash做出來(lái)的動(dòng)畫(huà)無(wú)法在移動(dòng)端的瀏覽器中瀏覽，因?yàn)锳dobe早已在2012年就停止了對(duì)移動(dòng)端flash的開(kāi)發(fā)。毫無(wú)疑問(wèn)，未來(lái)的移動(dòng)網(wǎng)頁(yè)游戲和動(dòng)畫(huà)會(huì)是H5的天下。

從技術(shù)實(shí)現(xiàn)的角度，H5配合JS（一種程序語(yǔ)言）可以做出任何二維動(dòng)畫(huà)，并且因?yàn)槭蔷W(wǎng)頁(yè)元素，所有元素均可以監(jiān)測(cè)到用戶點(diǎn)擊的數(shù)據(jù)，也就是說(shuō)你可以知道用戶在H5動(dòng)畫(huà)網(wǎng)頁(yè)中的所有交互行為。但是，具體到實(shí)際應(yīng)用，我們就要考慮周期、成本，和用戶體驗(yàn)的問(wèn)題，復(fù)雜的動(dòng)畫(huà)相應(yīng)的制作周期和成本會(huì)提高，同時(shí)也有可能影響加載速度等用戶體驗(yàn)相關(guān)的問(wèn)題。

以下這個(gè)網(wǎng)站是H5繪圖功能的典型例子，非常強(qiáng)大。你可以選擇不同型號(hào)的毛筆、筆觸半徑以及墨水的顏色，整個(gè)繪圖過(guò)程非常順暢，而且還有一個(gè)模擬手握毛筆的人性化設(shè)計(jì)。