<!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. Mysql - 解决Access denied for user ''@'localhost' to database 'mysql'问题

    http://361324767.blog.163.com/blog/static/11490252520124454042468/ 首先我想说一句话: 我极度鄙视国内搞IT的人,简直无语,同样是解决 ...

  2. KKCapture 高清录像软

    KKCapture是一款免费的高清录像软件.支持各种游戏录制,桌面录制,播放视频录制,操作非常简单.   软件特点 [1]1. 支持所有游戏录制,包括网络游戏.网页游戏.单机游戏,以及所有3D游戏.2 ...

  3. java String的equals，intern方法（转载）

    JAVA中的equals和==的区别 ==比较的是2个对象的地址,而equals比较的是2个对象的内容. 显然,当equals为true时,==不一定为true: 基础知识的重要性,希望引起大家的重视 ...

  4. （九）Hibernate 检索策略

    所有项目导入对应的hibernate的jar包.mysql的jar包和添加每次都需要用到的HibernateUtil.java 这里的hibernate.cfg.xml配置信息我就不再写了 第一节:检 ...

  5. $.get

    $('#choice').change(function() { if($(this).val() != '') { $.get( 'data.php', { what: $(this).val() ...

  6. [.Net MVC] Win7下IIS部署

    这里简单的分三步实现网站的部署. 一.发布 VS2013中有发布选项,在需要发布的工程项目上(就是设置为启动项目的那个)右键,点“发布”选项: 然后会弹出一个窗口: 选择自定义,随便输入一个名字,然后 ...

  7. ZOJ 2392 The Counting Problem（模拟）

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1368 题目大意:计算从S到T中所有的数,其中0,1,2,3,4,5, ...

  8. Mac 平台下安装 OpenVC

    opencv for Mac I 背景 Mac(Ios 9.0), 时间: 2015年11月.       本人也是小白,在网上爬了几天才安装好. II 安装OpenCV for Mac 首先下载op ...

  9. grep线上环境精典案例后续

    请执行命令取出 linux 中 eth0 的 IP 地址(请用 cut,有能力者也可分别用 awk,sed 命令答). 自己的方法: [root@nginx_back ~]# ifconfig eth ...

  10. 【spring配置】 一组配置文件引出的问题

    applicationContext.xml: <?xml version="1.0" encoding="UTF-8"?> <beans x ...