HTML5的动画学习历程

一.三角学原理.

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

三.获得元素坐标

四.//将十六进制的色值转换成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);//绘制并填充一个矩形

十五: 绘制图片

 1  var canvas=document.getElementById("canvas"),
 2  context=canvas.getContext('2d'),
 3  image=new Image();
 4  
 5  image.src='1.jpg';
 6  image.onload=function(){
 7      //context.drawImage(image,0,0);//图片左上角位置0,0
 8      //context.drawImage(image,0,0,400,400);//图片左上角位置0,0,图片尺寸400,400
 9      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)坐标
10      };

十六:绘制canvas中的图片

1 var canvas=document.getElementById("canvas"),
2 context=canvas.getContext('2d'),
3 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>
4 context.drawImage(image,0,0);

十七:速度向量,双轴上的圆运动

 1 var canvas=document.getElementById("canvas"),
 2 context=canvas.getContext("2d"),
 3 ball=new Ball(),
 4 vx=1,vy=1;
 5 ball.x=50,ball.y=100;
 6 
 7 (function drawFrame(){
 8     window.requestAnimationFrame(drawFrame,canvas);
 9     context.clearRect(0,0,canvas.width,canvas.height);
10     ball.x+=vx;
11     ball.y+=vy;
12     ball.draw(context);
13     }());

十八:角速度

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

十九:鼠标追随者

 1 var canvas=document.getElementById("canvas"),
 2 context=canvas.getContext("2d"),
 3 mouse=captureMouse(canvas),
 4 arrow=new Arrow(),
 5 speed=3;
 6 (function drawFrame(){
 7     window.requestAnimationFrame(drawFrame,canvas);
 8     context.clearRect(0,0,canvas.width,canvas.height);
 9     var dx=mouse.x-arrow.x,
10     dy=mouse.y-arrow.y,
11     angle=Math.atan2(dy,dx),
12     vx=Math.cos(angle)*speed,
13     vy=Math.sin(angle)*speed;
14     
15     arrow.rotation=angle;arrow.x+=vx;arrow.y+=vy;
16     arrow.draw(context);
17     }());

二十:速度向量扩展

 1 var canvas=document.getElementById("canvas"),
 2 context=canvas.getContext('2d'),
 3 mouse=captureMouse(canvas),
 4 arrow=new Arrow(),
 5 vr=2;
 6 arrow.x=canvas.width/2;
 7 arrow.y=canvas.height/2;
 8 
 9 (function drawFrame(){
10     window.requestAnimationFrame(drawFrame,canvas);
11     context.clearRect(0,0,canvas.width,canvas.height/2);
12     arrow.rotation+=vr*Math.PI/180;
13     arrow.draw(context);
14     }());

二十一: 键盘的左右键控制圆的运动

 1 var canvas=document.getElementById("canvas"),
 2 context=canvas.getContext("2d"),
 3 ball=new Ball(),
 4 vx=0,ax=0,ay=0,vy=0;
 5 
 6 ball.x=canvas.width/2;
 7 ball.y=canvas.height/2;
 8 
 9 window.addEventListener('keydown',function(event){
10     if(event.keyCode==37){//左
11         ax=-0.1;
12         }
13     else if(event.keyCode==39){//右
14         ax=0.1;
15         }
16     else if(event.keyCode==38){ay=-0.1;}//上
17     else if(event.keyCode==40){ay=0.1;}//下
18     },false);
19     
20     
21 window.addEventListener('keyup',function(){
22     ax=0;
23     ay=0;
24     },false);
25 
26 (function drawFrame(){
27     window.requestAnimationFrame(drawFrame,canvas);
28     context.clearRect(0,0,canvas.width,canvas.height);
29     
30     vx+=ax;vy+=ay;
31     ball.x+=vx;
32     ball.y+=vy;
33     ball.draw(context);
34     }());

二十二:单轴加速度

 1 var canvas=document.getElementById('canvas'),
 2 context=canvas.getContext('2d'),
 3 ball=new Ball(),
 4 vx=0,ax=0.1;
 5 ball.x=50;ball.y=100;
 6 
 7 (function drawFrame(){
 8     window.requestAnimationFrame(drawFrame,canvas);
 9     context.clearRect(0,0,canvas.width,canvas.height);
10     vx+=ax;
11     ball.x+=vx;
12     ball.draw(context);
13     }());

  1 双轴加速度
  2 var canvas=document.getElementById("canvas"),
  3 context=canvas.getContext('2d'),
  4 ball=new Ball(),
  5 vx=0,vy=0,ax=0,ay=0;
  6 ball.x=canvas.width/2;
  7 ball.y=canvas.height/2;
  8 window.addEventListener('keydown',function(){
  9     switch(event.keyCode){
 10         case 37://left
 11             ax=-0.1;
 12             break;
 13         case 39://right
 14             ax=0.1;
 15             break;
 16         case 38:
 17         ay=-0.1;
 18         break;        
 19         case 40:
 20         ay=0.1;
 21         break;
 22         }
 23     },false);
 24 window.addEventListener('keyup',function(){
 25     ax=0; ay=0;
 26     },false);
 27 (function drawFrame(){
 28     window.requestAnimationFrame(drawFrame,canvas);
 29     context.clearRect(0,0,canvas.width,canvas.height);    
 30     vx+=ax;
 31     vy+=ay;
 32     ball.x+=vx;
 33     ball.y+=vy;    
 34     ball.draw(context);    
 35     }());
 36     
 37 重力加速度
 38     var canvas=document.getElementById("canvas"),
 39 context=canvas.getContext('2d'),
 40 ball=new Ball(),
 41 vx=0,vy=0,ax=0,ay=0;
 42 ball.x=canvas.width/2;
 43 ball.y=canvas.height/2;
 44 var gravity=0.02;
 45 
 46 window.addEventListener('keydown',function(){
 47     switch(event.keyCode){
 48         case 37://left
 49             ax=-0.1;
 50             break;
 51         case 39://right
 52             ax=0.1;
 53             break;
 54         case 38:
 55         ay=-0.1;
 56         break;        
 57         case 40:
 58         ay=0.1;
 59         break;
 60         }
 61     },false);
 62 window.addEventListener('keyup',function(){
 63     ax=0; ay=0;
 64     },false);
 65 (function drawFrame(){
 66     window.requestAnimationFrame(drawFrame,canvas);
 67     context.clearRect(0,0,canvas.width,canvas.height);
 68     
 69     vx+=ax;
 70     vy+=ay;
 71     vy+=gravity;
 72     ball.x+=vx;
 73     ball.y+=vy;
 74     
 75     ball.draw(context);
 76     }());
 77 
 78 
 79 角加速度    
 80 var canvas=document.getElementById("canvas"),
 81 context=canvas.getContext('2d'),
 82 mouse=captureMouse(canvas),
 83 arrow=new Arrow(),
 84 vx=0,vy=0,force=0.05;
 85 (function drawFrame(){
 86     window.requestAnimationFrame(drawFrame,canvas);
 87     context.clearRect(0,0,canvas.width,canvas.height);
 88     var dx=mouse.x-arrow.x,
 89     dy=mouse.x-arrow.y,
 90     angle=Math.atan2(dy,dx),
 91     ax=Math.cos(angle)*force,
 92     ay=Math.sin(angle)*force;
 93     arrow.roation=angle;
 94     vx+=ax;vy+=ay;
 95     arrow.x+=vx;arrow.y+=vy;
 96     arrow.draw(context);    
 97     }());
 98 
 99 
100 制作飞船
101 var canvas=document.getElementById("canvas"),
102 context=canvas.getContext("2d");
103 var ship=new Ship(),
104 vr=0,vx=0,vy=0,thrust=0;
105 
106 ship.x=canvas.width/2;
107 ship.y=canvas.height/2;
108 window.addEventListener('keydown',function(event){
109     switch(event.keyCode){
110         case 37://left
111         vr=-3;
112         break;
113         
114         case 39://right
115         vr=3;
116         break;
117         
118         case 38://up
119         thrust=0.05;
120         ship.showFlame=true;
121         break;
122         }
123     },false);
124     
125 window.addEventListener('keyup',function(){
126     vr=0;
127     thrust=0;
128     ship.showFlame=false;
129     },false);    
130 
131 (function drawFrame(){
132     window.requestAnimationFrame(drawFrame,canvas);
133     context.clearRect(0,0,canvas.width,canvas.height);
134     ship.rotation+=vr*Math.PI/180;
135     var angle=ship.rotation,
136     ax=Math.cos(angle)*thrust,
137     ay=Math.sin(angle)*thrust;
138     vx+=ax;vy+=ay;
139     ship.x+=vx;ship.y+=vy;
140     ship.draw(context);
141     }());
142 
143 随机出现移动的小圆,移动超出边界的话,将他移除掉
144 var canvas=document.getElementById("canvas"),
145 context=canvas.getContext('2d'),
146 log=document.getElementById('log'),
147 balls=[],
148 numBalls=10;
149 
150 for(var ball,i=0;i<numBalls;i++){
151     ball=new Ball(20);
152     ball.id="ball"+i;
153     ball.x=Math.random()*canvas.width;
154     ball.y=Math.random()*canvas.height;
155     ball.vx=Math.random()*2-1;
156     ball.vy=Math.random()*2-1;
157     balls.push(ball);    
158     }
159 
160 function draw(ball,pos){
161     ball.x+=ball.vx;
162     ball.y+=ball.vy;
163     if(ball.x-ball.radius>canvas.width||
164     ball.x+ball.radius<0||
165     ball.y-ball.radius>canvas.height||
166     ball.y+ball.radius<0){
167         ball.splice(pos,1);
168         if(balls.length>0){
169             log.value="Removed"+ball.id;
170             }
171         else{
172             log.value="All gone!";
173             }
174         }
175     ball.draw(context);
176     }
177     (function drawFrame(){
178         window.requestAnimationFrame(drawFrame,canvas);
179         context.clearRect(0,0,canvas.width,canvas.height);
180         var i=balls.length;
181         while(i--){
182             draw(balls[i],i);
183             }
184         
185         }());
186     
187     
188     })