你的位置:首页 > 网页设计

[网页设计]canvas绘制弹跳小球


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>canvas多弹跳小球</title></head><body><input type="button" id="clbtn" value="清除画布" style="border:1px solid #444;display:block;margin: 10px auto;" /><canvas id="canvas" style="border:1px solid #444;display:block;margin: 10px auto;"></canvas></body><script>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<balls.length;i++)    {      balls[i].x += balls[i].vx;      balls[i].y += balls[i].vy;      balls[i].vy += balls[i].g;      cxt.beginPath();      cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI);      cxt.closePath();      cxt.fillStyle=balls[i].color[balls[i].colorindex];      cxt.fill();      cxt.strokeStyle='white';      cxt.stroke();      document.title = balls.length;            if( balls[i].y>=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<=0- balls[i].r)      {                   balls[i].vx = - balls[i].vx*0.7;      }    };        },50);clbtn.onclick=function(){    cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);    balls.splice(0,balls.length);//清空数组     };}</script></html>

canvas绘制弹跳小球。