Canvas彩色弹性碰撞小球动画js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 Canvas彩色弹性碰撞小球动画js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas彩色弹性碰撞小球动画</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script>
            window.onload=function(){
                var canvas=document.getElementById("ball");
                var cxt=canvas.getContext("2d");
                var r=20;
                var maxNum=5;
                var ballArray=new Array();
                var maxX=canvas.width;
                var maxY=canvas.height;
                for(var n=0;n<maxNum;n++){
                var x={
                    x:getRandomNumber(r, maxX-r),
                    y:getRandomNumber(r, maxY-r),
                    r:r,
                    vX:getRandomNumber(0.5, 1),
                 vY:getRandomNumber(0.5,1),
                    color:getRandomColor(),
                }
                ballArray.push(x);
                }
            function getRandomColor(){
return (function(m,s,c){
return (c ? arguments.callee(m,s,c-1) : '#') +
s[m.floor(m.random() * 16)]
})(Math,'0123456789abcdef',5)
}

                draw();		
                function draw(){
                    cxt.fillStyle="#000";
                        cxt.fillRect(0,0,canvas.width,canvas.height);
                    for (i in ballArray){
                        var x=i;
                        
                        ballArray[i].x+=ballArray[i].vX;
                        ballArray[i].y+=ballArray[i].vY;
                                
                        if(ballArray[i].x>=maxX-r){
                                    ballArray[i].x=maxX-r;
                                    ballArray[i].vX=-ballArray[i].vX;
                        }
                        if(ballArray[i].x<=r){
                                    ballArray[i].x=r;
                                    ballArray[i].vX=-ballArray[i].vX;
                        }			
                        if(ballArray[i].y>=maxY-r){
                                    ballArray[i].y=maxY-r;
                                    ballArray[i].vY=-ballArray[i].vY;
                        }
                        if(ballArray[i].y<=r){
                                    ballArray[i].y=r;
                                    ballArray[i].vY=-	ballArray[i].vY;
                        }

                        for(var j=0;j<maxNum;j++)
                                if(j!==x){
                                if(Math.round(Math.pow(ballArray[x].x-ballArray[j].x,2)+
                                                            Math.pow(ballArray[x].y-ballArray[j].y,2)) <= 
                                     Math.round(Math.pow(r+r,2)))	                         	                    
                                {
                                    
                                    var tempX=ballArray[x].vX;
                                    var tempY=ballArray[x].vY;
                                     ballArray[x].vX=ballArray[j].vX;
                                     ballArray[j].vX=tempX;
                                    ballArray[x].vY=ballArray[j].vY;
                                    ballArray[j].vY=tempY;
                                }
                            }
                        cxt.beginPath();
                        
                        cxt.fillStyle=ballArray[i].color;
                        cxt.arc(ballArray[i].x,ballArray[i].y,ballArray[i].r,0,Math.PI*2,true);
                        cxt.closePath();
                        cxt.fill();
                    }
                    setTimeout(function(){draw();},1);
                }
                
                function getRandomNumber(min, max) {
    return (min + Math.floor(Math.random() * (max - min + 1)))
}
            }
</script>
</head>
<body>
<canvas id="ball" width="500" height="200" style=" border:2px"></canvas>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";body,ul,dl,dd,dt,ol,li,p,h1,h2,h3,h4,h5,h6,textarea,form,select,fieldset,table,td,div,input{margin:0;padding:0;-webkit-text-size-adjust:none;background:#000000}
h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
div{text-align:left}
a img{border:0}
body{color:#333;text-align:center;font:12px "微软雅黑";}
ul,ol,li{list-style-type:none;vertical-align:0}
a{outline-style:none;color:#535353;text-decoration:none}
a:hover{color:#D40000;text-decoration:none}
.clear{height:0;overflow:hidden;clear:both}

附件:下载该文件资源,减少时间成本(增值服务)