キャンバスは跳ねるボールを描画します_html/css_WEB-ITnose-htmlチュートリアル-php.cn

キャンバスは跳ねるボールを描画します_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:46:58

オリジナル

1137 人が閲覧しました

<!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>

ログイン後にコピー

キャンバスは弾むボールを描きます。