canvas绘制弹跳小球_html/css_WEB-ITnose

     canvas多弹跳小球        window.onload=function(){    var clbtn=document.getElementById("clbtn");    var canvas=document.getElementById("canvas");    var cxt=canvas.getContext("2d");    canvas.width=1000;    canvas.height=500;    function ball(x,y,vx,colorindex){        this.x=x;        this.y=y;        this.r=20;        this.g=2;        this.vx=vx;        this.vy=-20;        this.colorindex=colorindex;        this.color=['red','blue','green','orange','yellow','pink'];    };    var balls=[];    //    context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=flase)//                  圆心坐标    ，半径值   ，开始角度    ，结束角度，    顺逆时针(默认flase顺时针)    canvas.onmousedown=function(){        canvas.onmousemove=function(e){            var e= event || ev;            var x = e.clientX-canvas.offsetLeft;            var y = e.clientY-canvas.offsetTop+document.body.scrollTop;                        balls.push(new ball(x,y,Math.floor(Math.random()*50-5),Math.floor(Math.random()*6+1)));                }        };    canvas.onmouseup=function(){        canvas.onmousemove=null;        };    setInterval(function(){        cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);//清除画布20帧        for(var i = 0 ;i =500 -  balls[i].r)            {                 balls[i].y = 500 -  balls[i].r;                 balls[i].vy = - balls[i].vy*0.7;            }            if(  balls[i].x>=1000 -  balls[i].r || balls[i].x   

canvas绘制弹跳小球。

查看更多关于canvas绘制弹跳小球_html/css_WEB-ITnose的详细内容...