<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div style="position:absolute;top:50px;left:50px;"></div>

    <canvas id="canvas" width="80" height="98"></canvas>

    <script type="text/javascript">

    window.addEventListener("load", eventWindowLoaded,false);

    function eventWindowLoaded(){

        canvasApp();

    }

    function canvasApp(){

        var theCanvas=document.getElementById("canvas");

        var context=theCanvas.getContext('2d'); 

        counter=0;

        var tileSheet = new Image();

        tileSheet.addEventListener('load', eventShipLoaded , false);

        tileSheet.src = "1.png";

        function eventShipLoaded() {

            startUp();

        }

        function drawScreen() {

            context.fillStyle = "white";

            context.fillRect(0,0,500,500);

            context.drawImage(tileSheet,80*counter,288,80,96,0,0,80,96);

            counter++;

            if (counter>1) {

                counter=0;

            }

        }

        function startUp(){

            setInterval(drawScreen, 200);

        }

    }

    </script>

</body>

</html>

html5 动画精灵的更多相关文章

  1. 给你推荐10款优秀的 HTML5 动画工具

    HTML5 在过去三年快速增长,已经成为 Web 开发人员最喜欢的编程语言之一.强大的编程语言拥有开发更好的网页应用的能力. HTML5 中引入的新技术都非常好,像 Chrome.Firefox.Sa ...

  2. HTML5 Maker – 在线轻松制作 HTML5 动画效果

    HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...

  3. [Unity3D插件]2dtoolkit系列二 动画精灵的创建以及背景图的无限滚动

    经过昨天2dtoolkit系列教程一的推出,感觉对新手还有有一定的启发作用,引导学习使用unity 2dToolKit插件的使用过程,今天继续系列二——动画精灵的创建,以及背景图的无限循环滚动,在群里 ...

  4. 精选19款华丽的HTML5动画和实用案例

    下面是本人收集的19款超酷HTML5动画和实用案例,觉得不错,分享给大家. 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天 ...

  5. HTML5动画软件工具编辑器 HTML5动画分类 工具推荐

    接下来介绍几款制作HTML5动画的工具,它们可以分为几类: 1.导出canvas动画: Flash CC(13.1).Animation.Radi 2.导出DIV+CSS3动画: HTML5 Make ...

  6. 精妙无比 8款HTML5动画实例及源码

    1.jQuery垂直带小图标菜单导航插件 今天我们要来分享一款jQuery菜单插件,这款jQuery菜单是垂直的样式,鼠标滑过菜单项时会出现一个背景,菜单项的右侧也会出现一个小箭头.另外值得注意的是, ...

  7. 设计师必看的10个HTML5动画工具

    如果你想用令人难以置信的动画创建引人注目的网站的话,那么这里为设计师精心挑选了一些必备的HTML5动画工具.HTML5是设计师用来打造时尚网站的最流行的编程语言之一.在过去三年内,这种编程语言的使用人 ...

  8. 8个3D视觉效果的HTML5动画欣赏

    现在的网页中应用了越来越多的3D应用,特别是基于HTML5 Canvas的动画特效,让用户有一种非常震撼的视觉体验.本文收集了8个非常炫酷的3D视觉效果的HTML5动画,都有源代码分享,你可以学习你感 ...

  9. 8个WEB前端创意HTML5动画应用精选

    和十几年前相比,现在的网页加入了很多动画元素,从之前的Flash到现在的HTML5,动画样式越来越丰富,动画制作也越来越便捷.本文精选了几款非常富有创意的HTML5动画应用,欣赏一下吧. 1.HTML ...

随机推荐

  1. ###《Effective STL》--Chapter5

    点击查看Evernote原文. #@author: gr #@date: 2014-09-17 #@email: forgerui@gmail.com Chapter5 算法 Topic 30: 确保 ...

  2. NodeJs随心学习（一）之UEditor开源项目部署

    作为NodeJs的初学者+6年的码农,我觉得从基础看起太慢了,还是直接上Demo好玩一些. 嗯,直接开玩..今天在GitHub上看到了UEditor之NodeJs版的开源项目激起了我浓厚的兴趣,随后决 ...

  3. Express安装与调试

    Express 是基于Node.Js平台,快速.开放.极简的 web 开发框架. 1.安装 Express的安装通过cmd来进行,过程如下: 首先,先在本地建立一个项目文件夹,取名Nodejs. 然后 ...

  4. 懒人记录 Hadoop2.7.1 集群搭建过程

    懒人记录 Hadoop2.7.1 集群搭建过程 2016-07-02 13:15:45 总结 除了配置hosts ,和免密码互连之外,先在一台机器上装好所有东西 配置好之后,拷贝虚拟机,配置hosts ...

  5. 13_ServletContext对象

    [简介] ServletContext即Servlet上下文对象,该对象表示当前的web应用环境信息,一个Web应用只会创建一个ServletContext对象. Web容器启动的时候,它会为每个We ...

  6. OpenJudge/Poj 2000 Gold Coins

    1.链接地址: http://bailian.openjudge.cn/practice/2000 http://poj.org/problem?id=2000 2.题目: 总Time Limit: ...

  7. resid入门笔记（二）

    本节介绍redis 消息订阅   密码  持久化  主从配置   首先我对消息订阅理解的不深,应该说仅知道概念吧 发送消息  cctv1 发送 hello   cctv2 发送 ‘你好’ client ...

  8. hdu 3572 Task Schedule

    Task Schedule 题意:有N个任务,M台机器.每一个任务给S,P,E分别表示该任务的(最早开始)开始时间,持续时间和(最晚)结束时间:问每一个任务是否能在预定的时间区间内完成: 注:每一个任 ...

  9. 教育O2O在学校落地，学堂在线瞄准混合式教学

    (大讲台—国内首个it在线教育混合式自适应学习平台.) 进入2015年,互联网教育圈最火的词非“教育O2O”莫属.不断刷新的融资金额和速度,不断曝光的正面和负面新闻,都让教育O2O公司赚足了眼球.然并 ...

  10. Sybase ASE无响应的又一个情况

    昨天下午,客户那边的系统管理员给我电话,说有套系统的SYBASE数据库最近有点怪,总是时不时莫名其妙地就忽然卡死,有可能一下子就自动恢复了,也有可能后面一直卡住,只好重启.根据客户反映的状况,初步判断 ...