html5教程精灵,html5 高级动画精灵

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

}

}

html5高级

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

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

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

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

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

7 个顶级的 HTML5 Canvas 动画赏析

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

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

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

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

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

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

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

8个经典HTML5 3D动画赏析

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

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

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

随机推荐

OPencv1.0配置vs2010(介于OPencv的经典之作。都是OPencv1.0为基础的。)

首先下载OPencv1.0 我在之前的博客中写了下载的资源http://www.cnblogs.com/xiaochige/p/5990858.html 把OPencv1.0中bin文件夹下的所有内容 ...

RPi 2B python opencv camera demo example

/************************************************************************************** * RPi 2B pyt ...

requirejs 定义模块中含有prototype

因为我对requirejs不熟悉,不清楚如何定义带有prototype的模块, 在看了:https://gist.github.com/jonnyreeves/2474026 的demo之后,就明白了 ...

SPRING IN ACTION 第4版笔记-第五章BUILDING SPRING WEB APPLICATIONS-006-处理表单数据(注册、显示用户资料)

一.显示注册表单 1.访问资源 @Test public void shouldShowRegistration() throws Exception { SpitterRepository mock ...

Content-Disposition的使用和注意事项

转载:http://www.cnblogs.com/jzaileen/articles/1281025.html 最近不少Web技术圈内的朋友在讨论协议方面的事情,有的说web开发者应该熟悉web相关 ...

hand第四次考核

使用Spring与Mybatis技术实现下要求: (2分)1,Spring的配置文件名称为ApplicationContext.xml (2分)2,在ApplicationContext.xml中配置 ...

javascript instanceof

object instanceof constructor instanceof运算符用来检测constructor.prototype是否存在于参数object的原型链上. 对于instanceof ...

整理Ruby相关的各种概念(rvm, gem, bundle, rake, rails等)

转自:http://henter.me/post/ruby-rvm-gem-rake-bundle-rails.html Ruby 这个就不用多说了 RVM 用于帮你安装Ruby环境,帮你管理多个Ru ...

MongoDB高级查询用法大全

转载 http://blog.163.com/lgh_2002/blog/static/440175262012052116455/ 详见官方的手册: http://www.mongodb.org/d ...

记一次被yield return坑的历程。

事情的经过是这样的: 我用C#写了一个很简单的一个通过迭代生成序列的函数. public static IEnumerable Iterate(this Func& ...