【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。

不支援 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 攝影作品集,此為商業版權圖片,請勿轉載或移作其它任何用途。

沒有留言: