<!DOCTYPE html>
<html>
<head>
<title>Tmplementing advenced animation</title>
<meta charset="utf-8">
<link href="canvas.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var canvas=$("#myCanvas");
var context=canvas.get(0).getContext("2d");
var canavsWidth=canvas.width();
var canvasHeight=canvas.height();
$(window).resize(resizeCanvas);
function resizeCanvas(){
canvas.attr("width",$(window).get(0).innerWidth);
canvas.attr("height",$(window).get(0).innerHeight);
canvasWidth=canvas.width();
canvasHeight=canvas.height();
};
resizeCanvas();
var playAnimation=true;
var startButton=$("#startAnimation");
var stopButton=$("#stopAnimation");
startButton.hide();
startButton.click(function(){
$(this).hide();
stopButton.show();
playAnimation=true;
animate();
});
stopButton.click(function(){
$(this).hide();
startButton.show();
playAnimation=false;
});
var Asteroid=function(x,y,radius,mass,vX,vY,aX,aY){
this.x=x;
this.y=y;
this.radius=radius;
this.mass=mass;
this.vX=vX;
this.vY=vY;
this.aX=aX;
this.aY=aY;
};
var asteroids=new Array();
for(var i=0;i<10;i++){
var x=20+(Math.random()*(canvasWidth-40));
var y=20+(Math.random()*(canvasHeight-40));
var radius=5+Math.random()*10;
var mass=radius/2;
var vX=Math.random()*4-2;
var vY=Math.random()*4-2;
var aX=0;
var aY=0;
asteroids.push(new Asteroid(x,y,radius,mass,vX,vY,aX,aY));
};
function animate(){
context.clearRect(0,0,canvasWidth,canvasHeight);
context.fillStyle="rgb(255,230,230)";
var asteroidsLength=asteroids.length;
for(var i=0;i<asteroidsLength;i++){
var tmpAsteroid=asteroids[i];
tmpAsteroid.x+=tmpAsteroid.vX;
tmpAsteroid.y+=tmpAsteroid.vY;
if(Math.abs(tmpAsteroid.vX)<10){tmpAsteroid.vX+=tmpAsteroid.aX;};
if(Math.abs(tmpAsteroid.vY)<10){tmpAsteroid.vY+=tmpAsteroid.aY;};
if(tmpAsteroid.x-tmpAsteroid.radius<0){
tmpAsteroid.x=tmpAsteroid.radius;
tmpAsteroid.vX*=-1;tmpAsteroid.aX*=-1;
};
if(tmpAsteroid.x+tmpAsteroid.radius>canvasWidth){
tmpAsteroid.x=canvasWidth-tmpAsteroid.radius;
tmpAsteroid.vX*=-1;tmpAsteroid.aX*=-1;
};
if(tmpAsteroid.y-tmpAsteroid.radius<0){
tmpAsteroid.y=tmpAsteroid.radius;
tmpAsteroid.vY*=-1;tmpAsteroid.aY*=-1;
};
if(tmpAsteroid.y+tmpAsteroid.radius>canvasHeight){
tmpAsteroid.y=canvasHeight-tmpAsteroid.radius;
tmpAsteroid.vY*=-1;tmpAsteroid.aY*=-1;
};
for(var j=i+1;j<asteroidsLength;j++){
var tmpAsteroidB=asteroids[j];
var dX=tmpAsteroidB.x-tmpAsteroid.x;
var dY=tmpAsteroidB.y-tmpAsteroid.y;
var distance=Math.sqrt((dX*dX)+(dY*dY));
if(distance<tmpAsteroid.radius+tmpAsteroidB.radius){
var angle=Math.atan2(dY,dX);
var sine=Math.sin(angle);
var cosine=Math.cos(angle);
var x=0;
var y=0;
var xB=dX*cosine+dY*sine;
var yB=dY*cosine-dX*sine;
var vTotal=vX-vXb;
var vX=tmpAsteroid.vX*cosine+tmpAsteroid.vY*sine;
var vY=tmpAsteroid.vY*cosine-tmpAsteroid.vX*sine;
var vXb=tmpAsteroidB.vX*cosine+tmpAsteroidB.vY*sine;
var vYb=tmpAsteroidB.vY*cosine-tmpAsteroidB.vX*sine;
vX*=-1;vXb*=-1;
xB=x+(tmpAsteroid.radius+tmpAsteroidB.radius);
tmpAsteroid.x=tmpAsteroid.x+(x*cosine-y*sine);
tmpAsteroid.y=tmpAsteroid.y+(y*cosine+x*sine);
tmpAsteroidB.x=tmpAsteroid.x+(xB*cosine-yB*sine);
tmpAsteroidB.y=tmpAsteroid.y+(yB*cosine+xB*sine);
tmpAsteroid.vX=vX*cosine-vY*sine;
tmpAsteroid.vY=vY*cosine+vX*sine;
tmpAsteroidB.vX=vXb*cosine-vYb*sine;
tmpAsteroidB.vX=vYb*cosine+vXb*sine;
}
}
context.beginPath();
context.arc(tmpAsteroid.x,tmpAsteroid.y,tmpAsteroid.radius,0,Math.PI*2,false);
context.closePath();
context.fill();
};
if(playAnimation){
setTimeout(animate,33);
};
};
animate();
});
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<!--在此插入后备内容-->
</canvas>
<div id="myButtons">
<button id="startAnimation">Start</button>
<button id="stopAnimation">Stop</button>
</div>
</body>
</html>
HTML5+Canvas基础教程 代码包
1星 需积分: 9 157 浏览量
2013-09-05
01:27:20
上传
评论
收藏 161KB ZIP 举报 
HTML5+Canvas基础教程 代码包 （101个子文件） 
7-14.htm 4KB 7-8.htm 4KB 7-5.htm 3KB 7-4.htm 3KB 7-3.htm 3KB 7-2.htm 2KB 7-1-1.htm 2KB 7-1.htm 2KB 6-17.htm 2KB 5-31.htm 2KB 5-30.htm 2KB 6-15.htm 2KB 6-7.htm 2KB 6-6.htm 2KB 6-5.htm 2KB 5-26.htm 1KB 6-4.htm 1KB 5-25.htm 1KB 5-22.htm 1KB 5-20.htm 1KB 6-3.htm 1KB 5-11.htm 1KB 6-2.htm 1KB 5-24.htm 1KB 5-15.htm 1KB 5-23.htm 1KB 3-27.htm 961B 5-18.htm 918B 4-36.htm 916B 4-40.htm 861B 4-41.htm 861B 4-17.htm 847B 4-4.htm 847B 5-17.htm 836B 4-33.htm 801B 4-35.htm 801B 4-3.htm 792B 3-16.htm 788B 4-32.htm 781B 4-2.htm 775B 4-20.htm 765B 4-22.htm 765B 4-26.htm 764B 4-24.htm 763B 4-19.htm 760B 4-21.htm 760B 4-25.htm 759B 5-8.htm 758B 4-23.htm 758B 5-10.htm 757B 4-27.htm 756B 4-28.htm 753B 4-29.htm 752B 5-7.htm 746B 3-15.htm 743B 4-18.htm 737B 4-6.htm 735B 4-7.htm 731B 3-24.htm 728B 5-9.htm 726B 4-31.htm 722B 3-26.htm 721B 4-1.htm 720B 4-37.htm 720B 4-10.htm 715B 5-5.htm 697B 5-6.htm 697B 4-38.htm 696B 5-3.htm 685B 5-29.htm 685B 4-39.htm 678B 5-2.htm 677B 3-22.htm 675B 3-21.htm 674B 3-23.htm 673B 3-17.htm 668B 4-9.htm 663B 4-30.htm 657B 4-13.htm 653B 4-16.htm 633B 4-11.htm 625B 3-14.htm 623B 4-8.htm 621B 3-13.htm 613B 3-25.htm 602B 3-10.htm 581B 3-11(2).htm 581B 3-11.htm 579B 3-20.htm 538B 3-19.htm 535B 3-7.htm 534B 3-6.htm 533B 3-18.htm 528B 3-12.htm 511B 3-5.htm 481B 3-4.htm 479B 3-2.htm 477B 3-3.htm 477B 5-28.htm 420B 5-27.htm 339B共 101 条
- 1
- 2
评论1
最新资源