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. （六）6.5 Neurons Networks Implements of Sparse Autoencoder

    一大波matlab代码正在靠近.- -! sparse autoencoder的一个实例练习,这个例子所要实现的内容大概如下:从给定的很多张自然图片中截取出大小为8*8的小patches图片共1000 ...

  2. 【阅读】提问的智慧+有效的报告BUG

    这两项可谓是我们测试人员的基本要求了,不过实话说的是,我自己这两方面很薄弱.哎!!! 这两篇文章都看过了,不过我在这也记个笔记吧.督促自己!!! <提问的智慧> <如何有效地报告Bu ...

  3. java生成简单Excel工作薄

    前言: 代码都是建立在实际需求上的,上周做完一个调外部电影券接口的项目,这周产品又要excel表格,大致内容为:券所属影院.图片URL.等信息制作为excel表格,把每次同步过来的数据给他分析. jx ...

  4. Linux makefile教程之更新函数库文件十[转]

    使用make更新函数库文件 ——————————— 函数库文件也就是对Object文件(程序编译的中间文件)的打包文件.在Unix下,一般是由命令"ar"来完成打包工作. 一.函数 ...

  5. Spring3.0.6定时任务

    项目使用的Spring版本比较旧是3.0.6版本,由于需要进行定时任务,就决定使用Spring自带的scheduled task. 在网上找了很多文章,也查看了Spring3.0.6的官方文档,按照网 ...

  6. Java 8开发的4大顶级技巧

    我使用Java 8编码已经有些年头,既用于新的应用程序,也用来迁移现有的应用,感觉是时候写一些我发现的非常有用的“最佳实践”.我个人并不喜欢“最佳实践”这个说法,因为它意味着“一刀切”的解决方案,而编 ...

  7. Quartz.net 2.0的使用说明

    Quartz.NET是一个开源的作业调度框架,是OpenSymphony 的 Quartz API的.NET移植,它用C#写成,可用于WinForm和ASP.NET应用中.它提供了巨大的灵活性而不牺牲 ...

  8. 细雨学习笔记：Jmeter上一个请求的结果作为下一个请求的参数--使用正则提取器

    Jmeter接口自动化--使用正则提取器,可以把上一个请求的结果取出来,作为下一个请求的入参

  9. kinect 录制彩色和深度视频

    安装 KinectSDK-v1.8-Setup.exe OpenNI-Windows-x86-2.1.0.msi Qt工程 拷贝 Redist 下内容到 编译的exe所在目录 #include < ...

  10. windows下django1.7 +python3.4.2搭建记录2

    1.自定义页面写一个显示当前时间的页面views.py文件加一个使用模板的模块,整体内容为: #coding=utf-8 from django.shortcuts import render fro ...