不支援 HTML5 的瀏覽器下 <canvs> 標籤的運作

當這篇文章載入之後,你會看到以下的圖片,如果其中的文字,是仿手寫動畫出現,則表示你的瀏覽器支援 HTML5  < canvs> 標籤,若是畫面僅呈現一張靜態圖片,則你的瀏覽器並不支援 <canvs> ,考慮換一個吧。
透過 Canvas 物件製作動畫或是描繪圖形時,我們首先需要配置一個如下的 <canvas> 標籤,然後於其中進行繪圖運算。

<canvas id="pCanvas" width="533" height="355"   >    
        
</canvas>

當使用者的瀏覽器不支援  <canvs> ,如此的配置將完全沒有效果,我們通常會在標籤的區域中,配置替代內容,提供使用者必要的資訊,以本文一開始的動畫為例,其中配置了靜態圖片如下:

<canvas id="pCanvas" width="533" height="355"   >     
<img src="images/love_v_bg_ie.jpg" />
</canvas>

如此一來,使用者若是透過比較舊式的瀏覽器檢視這篇文章,至少可以看到動畫最後的結果圖片。

P.S. 背景圖片授權來自 http://www.facebook.com/defufu 攝影作品集,此為商業版權圖片,請勿轉載或移作其它任何用途。

沒有留言: