<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Follow Mouse</title>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="ball.js"></script>
<style type="text/css">
body{background-color: silver;}
#canvas{background-color: black;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<textarea name="" id="log" cols="30" rows="10"></textarea>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("canvas"),
context=canvas.getContext("2d"),
ship=new Ship(),
vr=0,
vx=0,
vy=0,
thrust=0;
ship.x=canvas.width/2;
ship.y=canvas.height/2; window.addEventListener("keydown", function(event){
switch(event.keyCode){
case 37:
vr=-3;
break;
case 39:
vr=3;
break;
case 38:
thrust=0.05;
ship.showFlame=true;
break;
}
}, false)
window.addEventListener("keyup", function(){
vr=0;
thrust=0;
ship.showFrame=false;
}, false); (function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height); ship.rotation+=vr*Math.PI/180;
var angle=ship.rotation,
ax=Math.cos(angle)*thrust,
ay=Math.sin(angle)*thrust,
left=0,
right=canvas.width,
top=0,
bottom=canvas.height;
vx+=ax;
vy+=ay;
ship.x+=vx;
ship.y+=vy; if (ship.x-ship.width/2>right) {
ship.x=ship.width/2;
}else if(ship.x+ship.width/2<left){
ship.x=right+ship.width/2;
}
if (ship.y-ship.height/2>bottom) {
ship.y=top-ship.height/2;
}else if(ship.y<top-ship.height/2){
ship.y=bottom+ship.height/2;
}
ship.draw(context);
}())
}
</script>
</body>
</html>
function Ship(){
this.x=0;
this.y=0;
this.width=25;
this.height=20;
this.rotation=0;
this.showFlame=false;
}
Ship.prototype.draw=function(context){
context.save();
context.translate(this.x,this.y);
context.rotate(this.rotation);
context.lineWidth=1;
context.strokeStyle="white";
context.beginPath();
context.moveTo(10,0);
context.lineTo(-10,10);
context.lineTo(-5,0);
context.lineTo(-10,-10);
context.lineTo(-5,0);
context.lineTo(-10,-10);
context.lineTo(10,0);
context.stroke();
if(this.showFlame){
context.beginPath();
context.moveTo(-7.5,-5);
context.lineTo(-15,0);
context.lineTo(-7.5,5);
context.stroke();
}
context.restore();
}

html5 飞船动画的更多相关文章

  1. 7 个顶级的 HTML5 Canvas 动画赏析

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

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

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

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

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

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

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

  5. 8个经典HTML5 3D动画赏析

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

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

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

  7. HTML5 3D动画效果

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  8. Html5 Canvas动画旋转的小方块;

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. 30几个HTML5经典动画应用回顾 让你大饱眼福

    周末大放送,让我们来回顾一下HTML5经典动画应用,一定会让你大饱眼福. 1.HTML5 Canvas画板画图工具 可定义笔刷和画布 HTML5 Canvas还有一个比较实用的应用,那就是网络画板,这 ...

随机推荐

  1. 【html】【16】高级篇--毛玻璃效果[模糊]

    参考: http://www.zhangxinxu.com/wordpress/2013/11/%E5%B0%8Ftip-%E4%BD%BF%E7%94%A8css%E5%B0%86%E5%9B%BE ...

  2. Java获取方法参数名、Spring SpEL解析

    @Test public void testParse() { //表达式解析 ExpressionParser expressionParser = new SpelExpressionParser ...

  3. 04_HttpClient发送Https请求

    [实例 带Cookie访问HTTPS类型的 建信基金 的某一页面)] /** * 创建一个可以访问Https类型URL的工具类,返回一个CloseableHttpClient实例 */ public ...

  4. 某deed笔试题

    1.  删除ra,输入s,然后从前往后扫,遇到直接删除,O(n),算水题吧. 2. 矩阵乘法,看完题,感觉这么简单,估计有什么套路,仔细再读一遍,发现真是水题,50*50*50=125000,在2s时 ...

  5. [转]怎样在cmd(命令提示符)下进行复制粘贴操作

    原文链接:http://jingyan.baidu.com/article/93f9803fd3a4dde0e46f55f5.html cmd下复制粘贴的快捷操作方式 工具/原料 系统cmd 步骤/方 ...

  6. nginx 默认会把header里的参数去掉下划线

    做token验证的时候遇到问题:在本地可以获取前端header传的参数,但是部署到服务器获取的就是null(服务器地址用nginx做了代理) 原因: nginx代理默认会把header的参数的 &qu ...

  7. c++中动态尾随内存的技巧和定位new

    c 和 c++ 最大的特点就是对内存的自由操作,数据类型,其实都是对内存的一种解释方式.C语言中常用的一个技巧就是尾随数据,网络编程中经常会用到这个特性, 特别是以前写完成端口的时候,这个特性肯定是会 ...

  8. Android_Json实例

    概要: 最近由于自己的兴趣,想在Android开发一个自己的App,需要使用服务器,所以交换数据是逃不掉了的,但是学生党没有固定的服务器,因此使用的新浪的SAE,在学习的前期下可以尝试一下,挺不错的一 ...

  9. POJ2255二叉树

    题目大意就是给出你一个二叉树的前序和中序,要你求后序. 思路:二叉树的排序就是根据根节点的位置来定义的.所以找到二叉树的根节点是最重要的,二叉树的左子树和右子树也可以看成是二叉树,以此递归: #inc ...

  10. php中的require() 语句的使用方法

    php中的require() 语句的使用方法 require()语句包括并运行指定文件. require()语句包括并运行指定文件.有关包括如何工作的详细信息见 include() 的文档. requ ...