<!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'); 

        var tileSheet=new Image();

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

        tileSheet.src="2.png";

        var animationFrames=[1,2,3,4];

        var frameIndex=0;

        function eventShipLoaded(){

            startUp();

        }

        function drawScreen(){

            context.fillStyle="white";

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

            var sourceX=Math.floor(animationFrames[frameIndex]%4)*64;

            var sourceY=Math.floor(animationFrames[frameIndex]%4)*64;

            context.drawImage(tileSheet,sourceX,sourceY,64,64,0,0,64,64);

            frameIndex++;

            if(frameIndex==animationFrames.length){

                frameIndex=0;

            }

        }

        function startUp(){

            setInterval(drawScreen, 300);

        }

    }

    </script>

</body>

</html>

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

  1. html5高级

    Html5高级 项目回顾 Day 01 第三阶段知识体系: (1)AJAX异步请求 数据库.PHP.HTTP.原生AJAX.jQuery中的AJAX (2)HTML5高级特性 九大新特性 (3)Boo ...

  2. html5网页动画总结--jQuery旋转插件jqueryrotate

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

  3. HTML5+JavaScript动画基础 完整版 中文pdf扫描版

    <HTML5+JavaScript动画基础>包括了基础知识.基础动画.高级动画.3D动画和其他技术5大部分,分别介绍了动画的基本概念.动画的JavaScript基础.动画中的三角学.渲染技 ...

  4. 7 个顶级的 HTML5 Canvas 动画赏析

    HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...

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

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

  6. 【转】15个无比华丽的HTML5/CSS3动画应用

    原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心 ...

  7. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  8. 8个经典HTML5 3D动画赏析

    HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效.本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片.3D图表.3D按钮等方面,一起来看看. 1.HTM ...

  9. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

随机推荐

  1. eclipse怎么切换SVN的用户

    在用eclipse的时候会经常用到SVN来进行代码的版本控制,为了方便起见,我们会保存密码,从此之后就不会再出现输入或者修改用户名和密码的地方了,这时候想切换用户怎么办,在本地操作的一种方法是删除SV ...

  2. vs2010开发android的准备工作

    安装 Mono for Android for Visual Studio 2010 需要下面4个步骤: 安装 JDK 安装 Android SDK 配置模拟器 安装 Mono for Android ...

  3. 国外一些知名ASP.Net开源CMS系统

    1.Ludico Ludico是C#编写的居于ASP.NET 2.0的Portal/CMS系统.它的模块化设计是你可以按照你希望的使用或开发网站功能.它里面有高级的用户管理,一个所见即所的(WYSIW ...

  4. 牵扯较多属性和方法的类题目，很简单的题目本来不想发的，如果有同学学到这个题目感觉太长不愿敲代码，copy走我的即可～不过还是建议自己打一打

    /* 3.设计一个"学生"类 1> 属性 * 姓名 * 生日 * 年龄 * 身高(单位是m) * 体重(单位是kg) * 性别 * C语言成绩 * OC成绩 * iOS成绩 ...

  5. 【html】【7】基础布局初探

    当了解了上面的文章有一定基础后,开始尝试初步基础布局,可能不美观,但是要开始有布局框架思想 基础代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  6. 工厂方法（Factory Pattern）

    工厂方法模式定义:定义了一个创建对象的接口,但由子类决定要实例化的类是哪一个.工厂方法让类把实例化推迟到子类.(注:“决定”不是指模式允许子类本身在运行时做决定,而是指在编写创建者类时,不需要知道实际 ...

  7. 建立IP6隧道

    某站点又开始全站Free了,是否还在为在家上不了IPv6站点而苦恼呢?本教程适用于路由后的windows设备,即ip地址为内网地址通过本教程设置,可实现windows设备获得ipv6地址,以访问IPv ...

  8. 12个有趣的C语言问答（详解）

    本文参照博文<12个有趣的C语言问答>,在原文的基础上增加来对应的知识点的详细介绍. 1 gets()方法 Q:下面的代码有一个被隐藏的问题,你能找到它吗? #include <st ...

  9. AD,Group

    DataTable dtUser = GetEmptyDT(); Dictionary<DirectoryEntry, string> test1 = GetUserAndGroup(cl ...

  10. Blu-Ray BRRip 和 BDRip 的区别

    Blu-Ray BRRip & BDRip 的区别 最近看电影有点多,常常看到blueray或者BDRip的格式,所以找了一下这两种格式的区别. BRRip = 来自蓝光盘片的xvid编码 B ...