<!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. JavaScript学习笔记(6)——JavaScript语法之对象

    JavaScript 中的所有事物都是对象:字符串.数字.数组.日期,等等. 在 JavaScript 中,对象是拥有属性和方法的数据. 属性是与对象相关的值. 方法是能够在对象上执行的动作. 提示: ...

  2. MVC构架思想

    一.构架的基本思想 采用MVC构架一个网站时,最好随时随地地将脑袋中切割成三份(M,V,C),这是一个最基本的切割单位,而且也是最容易切割的三个部分,但是在实务上,通常不会这么简单,有时候我们会再多切 ...

  3. dorado中的creationType选择类型

    新建model层中 DataType类型的时候,有几个属性creationType,matchType时候需要在右侧选择对应的javaBean,这是时候要在弹出的对话框搜索. 此时,只要搜索javaB ...

  4. 嵌入式系统关机/Embeded System PowerOff HowTo?

    REFER: 嵌入式Linux实现关机命令 REFER: Embedded File System and power-off REFER: kernel/reboot.c REFER: PowerO ...

  5. POJ3368(RMQ)

    Frequent values Description You are given a sequence of n integers a1 , a2 , ... , an in non-decreas ...

  6. RTTI（Runtime Type Information ）

    RTTI 是“Runtime Type Information”的缩写,意思是:运行时类型信息.它提供了运行时确定对象类型的方法.本文将简略介绍 RTTI 的一些背景知识.描述 RTTI 的概念,并通 ...

  7. HowTo: SVN undo add without reverting local changes

    Reference: http://stackoverflow.com/questions/5083242/undo-svn-add-without-reverting-local-edits svn ...

  8. 九度OJ 1504 把数组排成最小的数【算法】-- 2009年百度面试题

    题目地址:http://ac.jobdu.com/problem.php?pid=1504 题目描述: 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如 ...

  9. Linux内核Radix Tree（三）：API介绍

    1.     单值查找radix_tree_lookup 函数radix_tree_lookup执行查找操作,查找方法是:从叶子到树顶,通过数组索引键值值查看数组元素的方法,一层层地查找slot.其列 ...

  10. WPF 列表控件中的子控件上下文绑定

    <DataGrid Grid.ColumnSpan=" Height="Auto" SelectedItem="{Binding Path=SelectP ...