zoukankan      html  css  js  c++  java
  • 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);}
                                    );
        }

    三.获得元素坐标

    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);//绘制并填充一个矩形
    

     十五: 绘制图片

     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     })    
  • 相关阅读:
    最长上升子序列
    system call filters failed to install; check the logs and fix your configuration or disable system c
    linux centos 7 安装vnc远程服务
    Delphi XE 错误提示: [MySQL]-314. Cannot load vendor library [libmysql.dll orlibmysqlld.dll]
    MYSQL 修改密码的几种方式
    MySQL 常用操作和字段类型
    Java 获取GUID
    C# 获取GUID
    C++ 获取GUID
    Delphi GUID[2] 获取GUID值的方式
  • 原文地址:https://www.cnblogs.com/guoyansi19900907/p/3220688.html
Copyright © 2011-2022 走看看