|
阅读：8965回复：0
如何在html5的canvas画布中绘制gif动态图片
我们都知道如何在html5的canvas画布上绘制静态图片(jpeg, png等)，直接用canvas中的drawImage方法即可，那么如何绘制动态图片（gif）？
相信大家都知道动态图片之所以动态，是因为它是由很多图片按一定的帧数顺序播放而成的，因此我们是否也可以模拟这样的帧数，每隔一定的时间重新绘制图片，就能画出动态图片呢？答案当然是YES。下面就是我自己测试的一个例子，代码如下： 
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>canvas上画动态图，视频也可以画</title> <script type="text/javascript"> window.onload = function() { var img = document.getElementById('img1'); var can = document.getElementById('can'); var cxt = can.getContext('2d'); setInterval(function (){cxt.drawImage(img, 0, 0);}, 20); } </script> </head> <body> <p>准备绘制的动态图片:</p> <img id="img1" src="ex.gif" alt="你的浏览器不支持img标签"></img> <p>canvas画布上绘制的动态图片:</p> <canvas id="can" width="800px" height="600px" style="background-color: #CCCCCC"> 你的浏览器不支持canvas标签 </canvas> </body> </html>
这是本文中例子使用的动态图片资源ex.gif: |
|
最新喜欢： double...
|
公众号
