如何在html5的canvas画布中绘制gif动态图片

最新推荐文章于 2024-04-20 16:29:18 发布

degilj6052

最新推荐文章于 2024-04-20 16:29:18 发布

阅读量2.1k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ldjhust/p/3773764.html

版权

如何在html5的canvas画布中绘制gif动态图片

　　我们都知道如何在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:

posted on 2014-06-06 22:35 ldjhust 阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/ldjhust/p/3773764.html

degilj6052

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
如何在html5的canvas画布中绘制gif动态图片

如何在html5的canvas画布中绘制gif动态图片　　我们都知道如何在html5的canvas画布上绘制静态图片(jpeg, png等)，直接用canvas中的drawImage方法即可，那么如何绘制动态图片（gif）？相信大家都知道动态图片之所以动态，是...
复制链接

扫一扫