標籤：c style class blog code java
我們都知道如何在html5的canvas畫布上繪製靜態圖片(jpeg, png等)，直接用canvas中的drawImage方法即可，那麼如何繪製動態圖片（gif）？
相信大家都知道動態圖片之所以動態，是因為它是由很多圖片按一定的幀數順序播放而成的，因此我們是否也可以類比這樣的幀數，每隔一定的時間重新
繪製圖片，就能畫出動態圖片呢？答案當然是YES。下面就是我自己測試的一個例子，代碼如下：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>canvas上畫動態圖，視頻也可以畫</title> 6 7 <script type="text/javascript"> 8 window.onload = function() { 9 var img = document.getElementById(‘img1‘);10 var can = document.getElementById(‘can‘);11 var cxt = can.getContext(‘2d‘);12 13 14 setInterval(function (){cxt.drawImage(img, 0, 0);}, 20);15 }16 </script>17 </head>18 19 <body>20 <p>準備繪製的動態圖片:</p>21 <img id="img1" src="ex.gif" alt="你的瀏覽器不支援img標籤"></img>22 <p>canvas畫布上繪製的動態圖片:</p>23 <canvas id="can" width="800px" height="600px" style="background-color: #CCCCCC">你的瀏覽器不支援canvas標籤</canvas>24 </body>25 </html>
這是本文中例子使用的動態圖片資源ex.gif:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
