<!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. Oracle学习第一天---安装和基础入门

    国庆七天假,决定静下心来入门Oracle数据库. 环境:Ocacle 11g 软件安装包和安装图解,大家可以在我的百度网盘上下载:链接:http://pan.baidu.com/s/1ntjDEnZ ...

  2. Objective-C 【多态】

    ------------------------------------------- 多态的概念.实现以及注意事项 程序中的多态:不同的对象    以自己的方式去    响应   相同方法名(父类同 ...

  3. spring.net 和 mybatis.net

    demo是整合现有的spring.net 和 mybatis.net 完成的控制台程序,需要注意的地方:关于Config文件夹中的config文件的属性设定:同时保证Providers.config默 ...

  4. 记个maven无法识别JAVA_HOME的问题 Error: JAVA_HOME is not defined correctly.

    Error: JAVA_HOME is not defined correctly. We cannot execute /Library/Java/JavaVirtualMachines/jdk1. ...

  5. 实习笔记-2：sql 分组不一定要group by

    今天在公司写代码的时候,遇到一个sql语句构建问题. 情形是这样的: 我需要获取不同小组下前N条记录. select top 10 * from dbo.Topic where GroupID in ...

  6. Linux中的简单命令

    history:打印你输过的命令      1.用户在shell中输入的命令会自动保存到内存缓冲区      2.在退出shell的时候,内存中的数据会刷新到磁盘文件:~/.bash_history ...

  7. centos下如何用SMplayer播放WMV格式文件

    安装的是centos6.6,想用来做桌面系统使用!! 装完后,其他的办公软件都安装好了.但是,视频播放却出问题了. 配置的yum安装的SMplayer播放器,播放其他的视频文件没问题,就是WMV的视频 ...

  8. Windows phone 8 安装在 VMWare上错误的各种解决方案

    http://windowsasusual.blogspot.jp/2013/01/how-to-launch-windows-phone-8-emulator.html Hardware requi ...

  9. matlab2014在mac Yosemite下出现java空指针情况

    恢复方法为 使用xcode打开 /System/Library/CoreServices/SystemVersion.plist 将 ProductVersion 下的10.10或10.10.1改为1 ...

  10. sae-xhprof调试性能

    1. 在storage中创建xhprof的domain 2.在xhprof中,给对应的版本应用开启调试 3.在版本内的代码加入 sae_xhprof_start(); // 需要调优的代码 // .. ...