<!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. Loadrunner测试json接口

    1. loadrunner + json说明 使用lr测试json接口,向服务端发送json格式请求,接收处理返回响应数据. 主要用到函数: 1)web_custon_request 2)web_re ...

  2. 九度OJ 1402 特殊的数 -- 位操作

    题目地址:http://ac.jobdu.com/problem.php?pid=1402 题目描述: 现在有n个数,其中有一些出现了一次,一些出现了两次,一些出现了很多次.现在要求你找出那些只出现一 ...

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

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

  4. iscsiadm用法简介

    已知192.168.14.112节点,存在目标器 iqn.2015.06.cn.hrbyg.www.ygcs.c0a802b8:wzg,未设置CHAP,存在目标器 iqn.2015.06.cn.hrb ...

  5. WPF中实现根据拼音查找汉字

    1.WPF的一个触摸屏项目,需要输入姓名,但是屏幕不支持汉字输入,使用虚拟键盘不稳定,为了解决该问题特此进行处理. 2.新建一个类转换类,里面初始化一个数组,数组包含拼音,以及拼音下的常用的汉字. 3 ...

  6. memcached一些整理

        .NET中使用Memcached的相关资源整理   Memcached官方站点:http://www.danga.com/memcached/ Memcached Win32 1.2.6下载: ...

  7. Apose 套打

    给web添加一个dll引用:Apose.Words 下载链接:http://yunpan.cn/cA7v6uceM6KVw  提取码 11df 在Global.asax里面的Application_S ...

  8. m2e插件的新下载地址

    今天在按照<Maven实战>这本书给eclipse配置maven的m2eclipse插件的时候发现,书中写的老的下载地址http://m2eclipse.sonatype.org/site ...

  9. CentOS下shell显示-bash-4.1#不显示用户名路径的解决方法

    CentOS下shell显示-bash-4.1$不显示用户名路径的解决方法 问题描述: CentOS下新增一个用户,登录进去之后shell脚本的信息如下: 而不是我们经常看到的username@hos ...

  10. Python 爬虫入门（requests）

    相信最开始接触Python爬虫学习的同学最初大多使用的是urllib,urllib2.在那之后接触到了第三方库requests,requests完全能满足各种http功能,真的是好用爆了 :D 他们是 ...