HTML5的动画学习历程
2013-07-28 09:26
113 查看
一.三角学原理.
function getRadio(d){//根据角度获得弧度,
return d*Math.PI/180;
},
function getDdegree(r){//根据弧度获得角度
return r*180/Math.PI;
二.循环动画方法的浏览器判断 }
if(!window.requestAnimationFrame){
window.requestAnimationFrame=(window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestionFrame||
function(callback){return window.setTimeout(callback,100/60);}
);
}
三.获得元素坐标
var captureMouse=function(element){
var mouse={x:0,y:0};
element.addEventListener('mousemove',function(event){
var x,y;
if(event.pageX||event.pageY){
x=event.pageX;y=event.pageY;
}
else{
x=event.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
y=event.clientY+document.body.scrollTop+document.documentElement.scrollTop;
}
x-=element.offsetLeft;
y-=element.offsetTop;
mouse.x=x;
mouse.y=y;
},false);
return mouse;
};
四.//将十六进制的色值转换成rgb格式
var colorToRGB=function(color,alpha){
if(typeof color==="string"&&color[0]==="#")
color=window.parseInt(color.slice(1),16);
alpha=(alpha===underfined)?1:alpha;
var r=color>>16&0xff,
g=color>>8&0xff,
b=color&0xff,
a=(alpha<0)?0:((alpha>1)?1:alpha);
if(a===1)
return "rgb("+r+","+g+","+b+")";
else
return "rgba("+r+","+g+","+b+","+a+")";
};
五//可以将一个颜色的数据值转换成十六进制,也可以将十六进制转换成数据
var parseColor=function(color,toNumber){
if(toNumber===true){
if(typeof color==='number')
return (color|0);
if(typeof color==='string'&&color[0]==='#')
color=color.slice(1);
return window.parseInt(color,16);
}
else{
if(typeof color==='number')
color='#'+('00000'+(color|0).toString(16)).substr(-6);
return color;
}
};
六.绘制箭头
(1)
绘制圆球
七.绘制各种基本动画
(1)window.onload=function(){
//平滑的上下运动
/*var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d'),
mouse=captureMouse(canvas);
arrow=new Arrow();
arrow.x=canvas.width/2;
arrow.y=canvas.height/2;*/
/*(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
var dx=mouse.x-arrow.x;
var dy=mouse.x-arrow.y;
arrow.rotation=Math.atan(dy,dx);
arrow.draw(context);
}())*/
}
(2)window.onload=function(){
//线性垂直运动
/*var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d'),
ball=new Ball(),
angle=0;
var centerY=200;
var range=50;
var speed=0.05;
ball.x=canvas.width/2;
ball.y=canvas.height/2;
(function drawFram(){
window.requestAnimationFrame(drawFram,'canvas');
context.clearRect(0,0,canvas.width,canvas.height);
ball.y=centerY/2+Math.sin(angle)*50;
angle+=speed;
ball.draw(context);
}());
*/
}
(3)window.onload=function(){
//脉冲运动
/*var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d'),
ball=new Ball(),
angle=0,
centerY=200,
range=50,
xspeed=1,
yspeed=0.05;
ball.x=0;
(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
ball.x+=xspeed;
ball.y=centerY/2+Math.sin(angle)*range;
ball.draw(context);
}());*/
/*var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d'),
ball=new Ball(),
angle=0,
centerScale=1,
range=0.5,
speed=0.05;
ball.x=canvas.widt/2;
ball.y=canvas.height/2;
(function drawFrame(){
window.requestAnimationFrame(drawFrame,context);
context.clearRect(0,0,canvas.width,canvas.height);
ball.scaleX=ball.scaleY=centerScale+Math.sin(angle)*range;
angle+=speed;
ball.draw(context);
}());*/
}
(4)window.onload=function(){
//使用两鞥波个角
/*var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d'),
ball=new Ball(),
angleX=0,
angleY=0,
range=50,
centerX=canvas.width/2,
centerY=canvas.height/2,
xspeed=0.07,
yspeed=0.11;
(function drawFrame(){
window.requestAnimationFrame(drawFrame,context);
context.clearRect(0,0,canvas.width,canvas.height);
ball.x=centerX+Math.sin(angleX)*range;
ball.y=centerY+Math.sin(angleY)*range;
angleX+=xspeed;
angleY+=yspeed;
ball.draw(context);
}());*/
}
(5)window.onload=function(){//圆周运动
var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d');
angle=0,range=50,
centerY=canvas.height/2,
xspeed=1,yspeed=0.05,
xpos=0,ypos=centerY;
context.lineWidth=2;
(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.beginPath();
context.moveTo(xpos,ypos);
xpos+=xspeed;angle+=yspeed;
ypos=centerY+Math.sin(angle)*range;
context.lineTo(xpos,ypos);
context.stroke();
}());
}
(6) window.onload=function(){//椭圆运动
var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d');
ball=new Ball(),
angle=0,
centerX=canvas.width/2,
centerY=canvas.height/2,
radius=50,
speed=0.05;
(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
ball.x=centerX+Math.sin(angle)*radius;
ball.y=centerY+Math.cos(angle)*radius;
angle+=speed;
ball.draw(context);
}());}
(7)勾股定律中 连个随机出现的点的距离算法1
var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d');
log=document.getElementById('log');
var rect1={x:Math.random()*canvas.width,y:Math.random()*canvas.height};
context.fillStyle="#000000";
context.fillRect(rect1.x-2,rect1.y-2,4,4);
var rect2={x:Math.random()*canvas.width,y:Math.random()*canvas.height};
context.fillStyle="#ff0000";
context.fillRect(rect2.x-2,rect2.y-2,4,4);
var dx=rect1.x-rect2.x,
dy=rect1.y-rect2.y,
dist=Math.sqrt(dx*dx+dy*dy);
log.value="distance:"+dist;
(8)勾股定律 中 两个随机出现的点的距离算法2
var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d'),
mouse=captureMouse(canvas),
log=document.getElementById('log');
var a=canvas.height/2;
rect={x:canvas.width/2,y:a};
(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
var dx=rect.x-mouse.x,
dy=rect.y-mouse.y,
dist=Math.sqrt(dx*dx-dy*dy);
context.fillStyle="#000000";
context.fillRect(rect.x-2,rect.y-2,4,4);
context.beginPath();
context.moveTo(rect.x,rect.y);
context.lineTo(mouse.x,mouse.y);
context.closePath();
context.stroke();
log.value="distance:"+dist;
}());
八,方法介绍
//strokeStyle该属性用于指定线条的颜色.该值是一个颜色值(css风格的字符串),一个渐变对象或一个模式对象,线条默认颜色黑色(#000000)
//lineWidth:指定线条在路径上的宽度,默认为1,此时会在路径的两侧分别延半个像素,
//lineCap:线条的终点将如何绘制,它可以是平的,圆形活着,一段延伸线.该属性包含butt,round,square,默认是butt
//lineJoin:决定两条相连的线段如何结合,或者连接线的弯头部分如何绘制.round,bevel,miter.默认miter.
//miterLimit:当lineJoin属性设置问miter时,该属性可用于控制两条相交线外侧交点与内侧交点的距离,它必须是大于0的有限数,默认为10.
//context.save()
和context.restore()实现不同样式的转换,context.save()方法将canvas的当时状态存入栈中,包含各种样式,例
如:strokeStyle,fillStyle以及应用于canvas的变换效果.额外的样式变化会影响到后续的绘制指令.调用
context.restore()可以使得当时的canvas状态出栈而使用下一个状态,也就是上一个状态.//context.beginPath()即可表示想开始绘制一条新的路径,一条路劲只不过是构成一条线的一系列坐标位置,为了将它渲染到canvas上,需要调用contxt.stroke();
九:绘制宇宙飞船
十: 使用鼠标绘制路径
十一,使用quadraticCurveTo绘制弯线,不会穿过控制点
十二:使用quadraticCurveTo绘制弯线,穿过控制点
十三:色值渐变色:线性渐变
十四:色值渐变色:线性渐变
十五: 绘制图片
十六:绘制canvas中的图片
十七:速度向量,双轴上的圆运动
十八:角速度
十九:鼠标追随者
二十:速度向量扩展
二十一: 键盘的左右键控制圆的运动
二十二:单轴加速度
function getRadio(d){//根据角度获得弧度,
return d*Math.PI/180;
},
function getDdegree(r){//根据弧度获得角度
return r*180/Math.PI;
二.循环动画方法的浏览器判断 }
if(!window.requestAnimationFrame){
window.requestAnimationFrame=(window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestionFrame||
function(callback){return window.setTimeout(callback,100/60);}
);
}
三.获得元素坐标
var captureMouse=function(element){
var mouse={x:0,y:0};
element.addEventListener('mousemove',function(event){
var x,y;
if(event.pageX||event.pageY){
x=event.pageX;y=event.pageY;
}
else{
x=event.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
y=event.clientY+document.body.scrollTop+document.documentElement.scrollTop;
}
x-=element.offsetLeft;
y-=element.offsetTop;
mouse.x=x;
mouse.y=y;
},false);
return mouse;
};
四.//将十六进制的色值转换成rgb格式
var colorToRGB=function(color,alpha){
if(typeof color==="string"&&color[0]==="#")
color=window.parseInt(color.slice(1),16);
alpha=(alpha===underfined)?1:alpha;
var r=color>>16&0xff,
g=color>>8&0xff,
b=color&0xff,
a=(alpha<0)?0:((alpha>1)?1:alpha);
if(a===1)
return "rgb("+r+","+g+","+b+")";
else
return "rgba("+r+","+g+","+b+","+a+")";
};
五//可以将一个颜色的数据值转换成十六进制,也可以将十六进制转换成数据
var parseColor=function(color,toNumber){
if(toNumber===true){
if(typeof color==='number')
return (color|0);
if(typeof color==='string'&&color[0]==='#')
color=color.slice(1);
return window.parseInt(color,16);
}
else{
if(typeof color==='number')
color='#'+('00000'+(color|0).toString(16)).substr(-6);
return color;
}
};
六.绘制箭头
(1)
function Arrow(){ this.x=0; this.y=0; this.color="#ffff00"; this.rotation=0; } Arrow.prototype.draw=function(context){ context.save(); context.translate(this.x,this.y); context.rotate(this.rotation); context.lineWidth=2; context.fillStyle=this.color; context.beginPath(); context.moveTo(-50,-25); context.lineTo(0,-25); context.lineTo(0,-50); context.lineTo(50,0); context.lineTo(0,50); context.lineTo(0,25); context.lineTo(-50,25); context.lineTo(-50,-25); context.closePath(); context.fill(); context.stroke(); context.restore(); };
绘制圆球
function Ball(radius,color){ if(radius===undefined){ radius=40;} if(color==undefined){ color="#ff0000";} this.x=0;this.y=0; this.radius=radius; this.rotation=0; this.vx=0;//在边界和摩擦力上添加 this.vy=0;//在边界和摩擦力上添加 this.scaleX=1; this.scaleY=1; this.color=parseColor(color); this.lineWidth=1; } Ball.prototype.draw=function(context){ context.save(); context.translate(this.x,this.y); context.rotate(this.rotation); context.scale(this.scaleX,this.scaleY); context.lineWidth=this.lineWidth; context.fillStyle=this.color; context.beginPath(); context.arc(0,0,this.radius,0,(Math.PI*2),true); context.closePath(); context.fill(); if(this.lineWidth>0){ context.stroke(); } context.restore(); };
七.绘制各种基本动画
(1)window.onload=function(){
//平滑的上下运动
/*var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d'),
mouse=captureMouse(canvas);
arrow=new Arrow();
arrow.x=canvas.width/2;
arrow.y=canvas.height/2;*/
/*(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
var dx=mouse.x-arrow.x;
var dy=mouse.x-arrow.y;
arrow.rotation=Math.atan(dy,dx);
arrow.draw(context);
}())*/
}
(2)window.onload=function(){
//线性垂直运动
/*var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d'),
ball=new Ball(),
angle=0;
var centerY=200;
var range=50;
var speed=0.05;
ball.x=canvas.width/2;
ball.y=canvas.height/2;
(function drawFram(){
window.requestAnimationFrame(drawFram,'canvas');
context.clearRect(0,0,canvas.width,canvas.height);
ball.y=centerY/2+Math.sin(angle)*50;
angle+=speed;
ball.draw(context);
}());
*/
}
(3)window.onload=function(){
//脉冲运动
/*var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d'),
ball=new Ball(),
angle=0,
centerY=200,
range=50,
xspeed=1,
yspeed=0.05;
ball.x=0;
(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
ball.x+=xspeed;
ball.y=centerY/2+Math.sin(angle)*range;
ball.draw(context);
}());*/
/*var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d'),
ball=new Ball(),
angle=0,
centerScale=1,
range=0.5,
speed=0.05;
ball.x=canvas.widt/2;
ball.y=canvas.height/2;
(function drawFrame(){
window.requestAnimationFrame(drawFrame,context);
context.clearRect(0,0,canvas.width,canvas.height);
ball.scaleX=ball.scaleY=centerScale+Math.sin(angle)*range;
angle+=speed;
ball.draw(context);
}());*/
}
(4)window.onload=function(){
//使用两鞥波个角
/*var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d'),
ball=new Ball(),
angleX=0,
angleY=0,
range=50,
centerX=canvas.width/2,
centerY=canvas.height/2,
xspeed=0.07,
yspeed=0.11;
(function drawFrame(){
window.requestAnimationFrame(drawFrame,context);
context.clearRect(0,0,canvas.width,canvas.height);
ball.x=centerX+Math.sin(angleX)*range;
ball.y=centerY+Math.sin(angleY)*range;
angleX+=xspeed;
angleY+=yspeed;
ball.draw(context);
}());*/
}
(5)window.onload=function(){//圆周运动
var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d');
angle=0,range=50,
centerY=canvas.height/2,
xspeed=1,yspeed=0.05,
xpos=0,ypos=centerY;
context.lineWidth=2;
(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.beginPath();
context.moveTo(xpos,ypos);
xpos+=xspeed;angle+=yspeed;
ypos=centerY+Math.sin(angle)*range;
context.lineTo(xpos,ypos);
context.stroke();
}());
}
(6) window.onload=function(){//椭圆运动
var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d');
ball=new Ball(),
angle=0,
centerX=canvas.width/2,
centerY=canvas.height/2,
radius=50,
speed=0.05;
(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
ball.x=centerX+Math.sin(angle)*radius;
ball.y=centerY+Math.cos(angle)*radius;
angle+=speed;
ball.draw(context);
}());}
(7)勾股定律中 连个随机出现的点的距离算法1
var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d');
log=document.getElementById('log');
var rect1={x:Math.random()*canvas.width,y:Math.random()*canvas.height};
context.fillStyle="#000000";
context.fillRect(rect1.x-2,rect1.y-2,4,4);
var rect2={x:Math.random()*canvas.width,y:Math.random()*canvas.height};
context.fillStyle="#ff0000";
context.fillRect(rect2.x-2,rect2.y-2,4,4);
var dx=rect1.x-rect2.x,
dy=rect1.y-rect2.y,
dist=Math.sqrt(dx*dx+dy*dy);
log.value="distance:"+dist;
(8)勾股定律 中 两个随机出现的点的距离算法2
var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d'),
mouse=captureMouse(canvas),
log=document.getElementById('log');
var a=canvas.height/2;
rect={x:canvas.width/2,y:a};
(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
var dx=rect.x-mouse.x,
dy=rect.y-mouse.y,
dist=Math.sqrt(dx*dx-dy*dy);
context.fillStyle="#000000";
context.fillRect(rect.x-2,rect.y-2,4,4);
context.beginPath();
context.moveTo(rect.x,rect.y);
context.lineTo(mouse.x,mouse.y);
context.closePath();
context.stroke();
log.value="distance:"+dist;
}());
八,方法介绍
//strokeStyle该属性用于指定线条的颜色.该值是一个颜色值(css风格的字符串),一个渐变对象或一个模式对象,线条默认颜色黑色(#000000)
//lineWidth:指定线条在路径上的宽度,默认为1,此时会在路径的两侧分别延半个像素,
//lineCap:线条的终点将如何绘制,它可以是平的,圆形活着,一段延伸线.该属性包含butt,round,square,默认是butt
//lineJoin:决定两条相连的线段如何结合,或者连接线的弯头部分如何绘制.round,bevel,miter.默认miter.
//miterLimit:当lineJoin属性设置问miter时,该属性可用于控制两条相交线外侧交点与内侧交点的距离,它必须是大于0的有限数,默认为10.
//context.save()
和context.restore()实现不同样式的转换,context.save()方法将canvas的当时状态存入栈中,包含各种样式,例
如:strokeStyle,fillStyle以及应用于canvas的变换效果.额外的样式变化会影响到后续的绘制指令.调用
context.restore()可以使得当时的canvas状态出栈而使用下一个状态,也就是上一个状态.//context.beginPath()即可表示想开始绘制一条新的路径,一条路劲只不过是构成一条线的一系列坐标位置,为了将它渲染到canvas上,需要调用contxt.stroke();
九:绘制宇宙飞船
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.lineWidth=1; context.strokeStyle="#ffffff"; context.beginPath(); context.moveTo(10,0); context.lineTo(-10,0); 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,0); context.stroke(); } context.restore(); };
十: 使用鼠标绘制路径
var canvas=document.getElementById("canvas"), context=canvas.getContext('2d'), mouse=captureMouse(canvas); function onMouseMove(){ context.lineTo(mouse.x,mouse.y); context.stroke(); } canvas.addEventListener('mousedown',function(){ context.beginPath(); context.moveTo(mouse.x,mouse.y); canvas.addEventListener('mousemove',onMouseMove,false); },false); canvas.addEventListener('mouseup',function(){ canvas.removeEventListener('mousemove',onMouseMove,false) },false);
十一,使用quadraticCurveTo绘制弯线,不会穿过控制点
var canvas=document.getElementById("canvas"), context=canvas.getContext('2d'), mouse=captureMouse(canvas), x0=100,y0=200,x2=300,y2=200; canvas.addEventListener('mousemove',function(){ context.clearRect(0,0,canvas.width,canvas.height); var x1=mouse.x,y1=mouse.y; context.beginPath(); context.moveTo(x0,y0); context.quadraticCurveTo(x1,y1,x2,y2); context.stroke(); },false);
十二:使用quadraticCurveTo绘制弯线,穿过控制点
var canvas=document.getElementById("canvas"), context=canvas.getContext('2d'), mouse=captureMouse(canvas), x0=100,y0=200,x2=300,y2=200; canvas.addEventListener('mousemove',function(){ context.clearRect(0,0,canvas.width,canvas.height); var x1=mouse.x*2-(x0+y2)/2,y1=mouse.y*2-(x0+y2)/2; context.beginPath(); context.moveTo(x0,y0); context.quadraticCurveTo(x1,y1,x2,y2); context.stroke(); },false);
十三:色值渐变色:线性渐变
var canvas=document.getElementById("canvas"), context=canvas.getContext('2d'), pt1={x:0,y:0},pt2={x:100,y:100}, gradient=context.createLinearGradient(pt1.x,pt2.y,pt2.x,pt2.y); gradient.addColorStop(0,"#ffffff");//为渐变色添加颜色 gradient.addColorStop(0.5,"#0000ff") gradient.addColorStop(1,"#ff0000"); context.fillStyle=gradient; context.fillRect(0,0,100,100);//绘制并填充一个矩
十四:色值渐变色:线性渐变
var canvas=document.getElementById("canvas"), context=canvas.getContext('2d'), c1={x:150,y:150,radius:0},c2={x:150,y:150,radius:50}, gradient=context.createRadialGradient(c1.x,c1.y,c1.radius,c2.x,c2.y,c2.radius); gradient.addColorStop(0,"#ffffff");//为渐变色添加颜色 //gradient.addColorStop(0.5,"#0000ff") gradient.addColorStop(1,"#ff0000"); context.fillStyle=gradient; context.fillRect(0,0,100,100);//绘制并填充一个矩形
十五: 绘制图片
var canvas=document.getElementById("canvas"), context=canvas.getContext('2d'), image=new Image(); image.src='1.jpg'; image.onload=function(){ //context.drawImage(image,0,0);//图片左上角位置0,0 //context.drawImage(image,0,0,400,400);//图片左上角位置0,0,图片尺寸400,400 context.drawImage(image,50,50,450,450,50,50,300,300);//(image,sx,sy,sw,sh,dx,dy,dw,dh),将图片裁剪到矩形内(sx,xy,sw,sh)中,并缩放至(dh,dw),在绘制到(dx,dy)坐标 };
十六:绘制canvas中的图片
var canvas=document.getElementById("canvas"), context=canvas.getContext('2d'), image=document.getElementById("picture");//<canvas id="canvas" width="400px" height="400px" style="border:1px solid red; position:absolute; left:200px; top:50px;"><img src="1.jpg" id="picture" /></canvas> context.drawImage(image,0,0);
十七:速度向量,双轴上的圆运动
var canvas=document.getElementById("canvas"), context=canvas.getContext("2d"), ball=new Ball(), vx=1,vy=1; ball.x=50,ball.y=100; (function drawFrame(){ window.requestAnimationFrame(drawFrame,canvas); context.clearRect(0,0,canvas.width,canvas.height); ball.x+=vx; ball.y+=vy; ball.draw(context); }());
十八:角速度
var canvas=document.getElementById("canvas"), context=canvas.getContext("2d"), ball=new Ball(), angle=45,speed=1; ball.x=50,ball.y=100; (function drawFrame(){ window.requestAnimationFrame(drawFrame,canvas); context.clearRect(0,0,canvas.width,canvas.height); var radians=angle*Math.PI/180, vx=Math.cos(radians)*speed,vy=Math.sin(radians)*speed; ball.x+=vx;ball.y+=vy; ball.draw(context); }())
十九:鼠标追随者
var canvas=document.getElementById("canvas"), context=canvas.getContext("2d"), mouse=captureMouse(canvas), arrow=new Arrow(), speed=3; (function drawFrame(){ window.requestAnimationFrame(drawFrame,canvas); context.clearRect(0,0,canvas.width,canvas.height); var dx=mouse.x-arrow.x, dy=mouse.y-arrow.y, angle=Math.atan2(dy,dx), vx=Math.cos(angle)*speed, vy=Math.sin(angle)*speed; arrow.rotation=angle;arrow.x+=vx;arrow.y+=vy; arrow.draw(context); }());
二十:速度向量扩展
var canvas=document.getElementById("canvas"), context=canvas.getContext('2d'), mouse=captureMouse(canvas), arrow=new Arrow(), vr=2; arrow.x=canvas.width/2; arrow.y=canvas.height/2; (function drawFrame(){ window.requestAnimationFrame(drawFrame,canvas); context.clearRect(0,0,canvas.width,canvas.height/2); arrow.rotation+=vr*Math.PI/180; arrow.draw(context); }());
二十一: 键盘的左右键控制圆的运动
var canvas=document.getElementById("canvas"), context=canvas.getContext("2d"), ball=new Ball(), vx=0,ax=0,ay=0,vy=0; ball.x=canvas.width/2; ball.y=canvas.height/2; window.addEventListener('keydown',function(event){ if(event.keyCode==37){//左 ax=-0.1; } else if(event.keyCode==39){//右 ax=0.1; } else if(event.keyCode==38){ay=-0.1;}//上 else if(event.keyCode==40){ay=0.1;}//下 },false); window.addEventListener('keyup',function(){ ax=0; ay=0; },false); (function drawFrame(){ window.requestAnimationFrame(drawFrame,canvas); context.clearRect(0,0,canvas.width,canvas.height); vx+=ax;vy+=ay; ball.x+=vx; ball.y+=vy; ball.draw(context); }());
二十二:单轴加速度
var canvas=document.getElementById('canvas'), context=canvas.getContext('2d'), ball=new Ball(), vx=0,ax=0.1; ball.x=50;ball.y=100; (function drawFrame(){ window.requestAnimationFrame(drawFrame,canvas); context.clearRect(0,0,canvas.width,canvas.height); vx+=ax; ball.x+=vx; ball.draw(context); }());
双轴加速度 var canvas=document.getElementById("canvas"), context=canvas.getContext('2d'), ball=new Ball(), vx=0,vy=0,ax=0,ay=0; ball.x=canvas.width/2; ball.y=canvas.height/2; window.addEventListener('keydown',function(){ switch(event.keyCode){ case 37://left ax=-0.1; break; case 39://right ax=0.1; break; case 38: ay=-0.1; break; case 40: ay=0.1; break; } },false); window.addEventListener('keyup',function(){ ax=0; ay=0; },false); (function drawFrame(){ window.requestAnimationFrame(drawFrame,canvas); context.clearRect(0,0,canvas.width,canvas.height); vx+=ax; vy+=ay; ball.x+=vx; ball.y+=vy; ball.draw(context); }()); 重力加速度 var canvas=document.getElementById("canvas"), context=canvas.getContext('2d'), ball=new Ball(), vx=0,vy=0,ax=0,ay=0; ball.x=canvas.width/2; ball.y=canvas.height/2; var gravity=0.02; window.addEventListener('keydown',function(){ switch(event.keyCode){ case 37://left ax=-0.1; break; case 39://right ax=0.1; break; case 38: ay=-0.1; break; case 40: ay=0.1; break; } },false); window.addEventListener('keyup',function(){ ax=0; ay=0; },false); (function drawFrame(){ window.requestAnimationFrame(drawFrame,canvas); context.clearRect(0,0,canvas.width,canvas.height); vx+=ax; vy+=ay; vy+=gravity; ball.x+=vx; ball.y+=vy; ball.draw(context); }()); 角加速度 var canvas=document.getElementById("canvas"), context=canvas.getContext('2d'), mouse=captureMouse(canvas), arrow=new Arrow(), vx=0,vy=0,force=0.05; (function drawFrame(){ window.requestAnimationFrame(drawFrame,canvas); context.clearRect(0,0,canvas.width,canvas.height); var dx=mouse.x-arrow.x, dy=mouse.x-arrow.y, angle=Math.atan2(dy,dx), ax=Math.cos(angle)*force, ay=Math.sin(angle)*force; arrow.roation=angle; vx+=ax;vy+=ay; arrow.x+=vx;arrow.y+=vy; arrow.draw(context); }()); 制作飞船 var canvas=document.getElementById("canvas"), context=canvas.getContext("2d"); var 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://left vr=-3; break; case 39://right vr=3; break; case 38://up thrust=0.05; ship.showFlame=true; break; } },false); window.addEventListener('keyup',function(){ vr=0; thrust=0; ship.showFlame=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; vx+=ax;vy+=ay; ship.x+=vx;ship.y+=vy; ship.draw(context); }()); 随机出现移动的小圆,移动超出边界的话,将他移除掉 var canvas=document.getElementById("canvas"), context=canvas.getContext('2d'), log=document.getElementById('log'), balls=[], numBalls=10; for(var ball,i=0;i<numBalls;i++){ ball=new Ball(20); ball.id="ball"+i; ball.x=Math.random()*canvas.width; ball.y=Math.random()*canvas.height; ball.vx=Math.random()*2-1; ball.vy=Math.random()*2-1; balls.push(ball); } function draw(ball,pos){ ball.x+=ball.vx; ball.y+=ball.vy; if(ball.x-ball.radius>canvas.width|| ball.x+ball.radius<0|| ball.y-ball.radius>canvas.height|| ball.y+ball.radius<0){ ball.splice(pos,1); if(balls.length>0){ log.value="Removed"+ball.id; } else{ log.value="All gone!"; } } ball.draw(context); } (function drawFrame(){ window.requestAnimationFrame(drawFrame,canvas); context.clearRect(0,0,canvas.width,canvas.height); var i=balls.length; while(i--){ draw(balls[i],i); } }()); })
相关文章推荐
- 1.html5 学习要求,Html 5发展历程
- 【HTML5学习笔记】34:CSS3动画效果
- html5几个不错的动画及学习网站
- HTML5 Canvas绘图与动画学习59例
- 我的Html5学习开发历程(一)—— 导航栏的制作
- HTML5的 2D SVG和SVG DOM的学习笔记(2)---SVG动画
- html5 学习-3d动画
- html5学习历程1
- Html5学习--运动且旋转并放大缩小的动画效果
- HTML5学习之路--SVG配合js制作动画
- 我的iOS学习历程 - UIView动画与CAAnimation动画详解
- 【Cocos2d-html5游戏引擎学习笔记(10)】自定义精灵动画
- html5学习历程
- HTML5 Canvas画图与动画学习59例
- HTML5 Canvas核心技术 图形、动画与游戏开发学习总结
- 我的iOS学习历程 - UISlider(简单的设置一组图片动画)
- 我的iOS学习历程 - UISlider(简单的设置一组图片动画)
- html5和css3学习历程
- HTML5学习笔记之HTML5Canvas图像动画的实现
- html5学习记录03:超链接