http://ernestdelgado.com/public-tests/gifoncanvas/

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Animated Gif on Canvas</title>
<style type="text/css" media="screen">

body { color: #222; font: 75% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; margin: 0 auto; width: 750px; }
img { border: 3px solid yellow; }
canvas { border: 3px solid red; }
.ex-group { border-bottom: 1px solid #ccc; padding-bottom: 15px; }
</style></head>

<body>
<div class="ex-group">
<img id="ex-animated-sprite-gif" src="iori.gif" style="width: 50px; height: 50px;opacity:0;">
<canvas id="myCanvas" width="600" height="50" style="width: 600px; height: 50px;"></canvas>
</div>
<script type="text/javascript" charset="utf-8">

(function() {
var dx = 0;
drawGif = {
draw: function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = document.getElementById("ex-animated-sprite-gif");

//if(dx >= 550){
this.clearCanvas("myCanvas");
// dx=0;
//}
// dx+=50;
context.drawImage(imageObj, dx, 0,50, 50);
},
clearCanvas: function(canvasEl) {
var cv = document.getElementById(canvasEl);
cv.getContext('2d').clearRect(0, 0, cv.width, cv.height);
}

}
})()

window.onload = (function() {
setInterval(function(){
drawGif.draw();
},150);
});
</script>

</body>
</html>

canvas加载gif的更多相关文章

  1. canvas加载图片需要二次刷新的问题

    如题:此问题我也经在百度问问上进行了解答.https://zhidao.baidu.com/question/1048045241465845579.html 好吧,难怪现在百度那么坑人,理论水军专家 ...

  2. touchweb手机网站图片加载方法（canvas加载和延迟加载）

    一.canvas图片加载 关于canvas加载,我的方法是,将文章中所有用到图片的地方,都用canvas代替,给canvas一个data-src,里面存放img的路径,通过canvas方法渲染图片.因 ...

  3. canvas加载进度条

    <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content=& ...

  4. canvas加载图像

    之前按照例子,加载图像,发现加载图像,加载不上去,代码也没有错误,经过几次的尝试:发现需要重复调用下drawImage才可以. <script type="text/javascrip ...

  5. 初识canvas，使用canvas做一个百分比加载进度的动画

    canvas作为H5中重要的新增特性,使开发者可以用它来创作各种令人惊叹的作品.先来看一下浏览器对canvas的支持情况. <canvas> 标签定义图形,比如图表和其他图像,我们使用脚本 ...

  6. canvas初体验之加载图片

    上一篇的介绍主要是画一些基本的图案,这一篇主要是加载图案. canvas加载图片主要分为两个步骤: 1.获取图片资源. 2.将图片资源画到画布上. 1.1获取图片资源,canvasAPI为我们提供了多 ...

  7. Canvas——使用定时器模拟动态加载动画！

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 识别快递单号(2) - 加载图片到canvas

    传送门: 识别快递单号(1) - 图像处理   转载请注明出处: http://www.cnblogs.com/zaiyuzhong/p/load-image-to-canvas.html 上篇说到我 ...

  9. Loading加载小插件,用户可以选择html格式或canvas格式，自定义loading图片，canvas色彩搭配可根据个人喜好

    ;(function($) { $.Loading = function(options) { //暴漏插件默认值 $.Loading.defaults = { speed: 200, //弹出层淡出 ...

随机推荐

  1. Clusterware后台进程

    Clusterware由若干进程组成,其中最重要的是CRSD,CSSD,EVMD   在Clusterware安装的最后阶段,会要求在每个节点执行root.sh脚本,这个脚本实际的作用就是在/etc/ ...

  2. typedef 深入剖析

    typedef是一个我们常常会用到的关键字,而这个关键字有许多陷阱或者说许多不为我们深入理解的地方.很多书上都是很简单地一笔代过,并没有真正地让我们理解这个关键字.本文对其进行详细地说明.综合网络上找 ...

  3. cscope 的使用

    一. cscope安装 1.软件下载:http://sourceforge.net/project/showfiles.php?group_id=4664 2.软件安装: ./configure -- ...

  4. JDBC数据源(DataSource)的简单实现

    数据源技术是Java操作数据库的一个很关键技术,流行的持久化框架都离不开数据源的应用.   数据源提供了一种简单获取数据库连接的方式,并能在内部通过一个池的机制来复用数据库连接,这样就大大减少创建数据 ...

  5. Yii系列教程（三）：集成Redis

    1安装Redis 切换至/usr/local/src下,下载并安装redis: $ wgethttp://redis.googlecode.com/files/redis-2.6.12.tar.gz ...

  6. Java魔法类：sun.misc.Unsafe

    Unsafe类在jdk 源码的多个类中用到,这个类的提供了一些绕开JVM的更底层功能,基于它的实现可以提高效率.但是,它是一把双刃剑:正如它的名字所预示的那样,它是Unsafe的,它所分配的内存需要手 ...

  7. MySQL修改root密码的几种方法

    方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password for 用户名@localhost = password('新密码'); 例子:my ...

  8. 【LR】OSGI性能测试实例

    其实我们就两点Ø  确定测试登录最大并发用户数:Ø  事务平均响应时间 (两个查询) 得到这个任务 如何展开测试工作呢? 一.WindowsResources 设置(其实不监控 设不设都行 我感觉)  ...

  9. IGF职业组比赛

    IGF职业组比赛 参赛资格: 面向亚太区所有独立游戏开发者(参见详细规则) 截止日期: 2015年7月20日 2015年IGF职业组七大奖项设置如下: * 最佳游戏(RMB20, 000) * 最佳移 ...

  10. 在logopond中看到的优秀设计随想

    本随笔仅仅只是自己对于设计作品的想法,不喜勿喷~ 昨日看到关于大神配色的文章,决定在logopond网站中看看优秀的作品,以为自己的配色找找灵感,学习学习,对自己有很强的震撼力的有: 以女性高跟性的抽 ...