HTML canvas背景 转换 gif动态图

有html源码
像素不要太低最好和原来一样
例子:
http://www.17sucai.com/pins/demoshow/9869
http://im.qq.com/pcqq/
的背景
源码:
http://im-img.qq.com/pcqq/js/200/cav.js?_=1428576021379

能有多个颜色最好
要gif图片!
可以多给财富值和采纳
谢谢

    我们都知道如何在html5的canvas画布上绘制静态图片(jpeg, png等),直接用canvas中的drawImage方法即可,那么如何绘制动态图片(gif)?

相信大家都知道动态图片之所以动态,是因为它是由很多图片按一定的帧数顺序播放而成的,因此我们是否也可以模拟这样的帧数,每隔一定的时间重新

绘制图片,就能画出动态图片呢?答案当然是YES。下面就是我自己测试的一个例子,代码如下:

<!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>

如果你要动态换,写一个方法,重新替换不就好了,要什么图片换什么!希望5itjob能帮到你

追问

我是要gif不是要源代码谢谢
想要骗采纳不要来

温馨提示:答案为网友推荐,仅供参考

相关了解……

你可能感兴趣的内容

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网