Home >Web Front-end >HTML Tutorial >Canvas draws bouncing balls_html/css_WEB-ITnose
Canvas draws bouncing balls_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:46:581155browse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="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 draws a bouncing ball.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn