html制作随机多个小球,HTML5/Canvas 3D小球体随机运动模拟

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

window.οnlοad=function(){

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

context.translate(250,250);

context.shadowColor="#000";

//设置阴影水平偏移

context.shadowOffsetX=0;

//设置阴影竖直偏移

context.shadowOffsetY=3;

//设置阴影模糊程度

context.shadowBlur = 5;

var circles=[];

var fouse = 300;//焦距

var random=function(min,max){

return Math.floor(Math.random()*(max-min))+min;

};

var draw=function(){

context.clearRect(-250,-250,500,500);

for ( var i = 0; i < circles.length; i++) {

var circle = circles[i];

circle.x +=circle.xspeed;

if(circle.x > 250 || circle.x < -250){

circle.xspeed*=-1;

}

circle.y +=circle.yspeed;

if(circle.y > 250 || circle.y < -250){

circle.yspeed*=-1;

}

circle.z +=circle.zspeed;

if(circle.z > 600 || circle.z < -50){

circle.zspeed*=-1;

}

var scale=fouse/(fouse+circle.z);

context.save();

context.scale(scale,scale);

context.beginPath();

var radiusBg = context.createRadialGradient(circle.x,circle.y,0,circle.x,circle.y,circle.r);

radiusBg.addColorStop(0,"#cbc0f3");

radiusBg.addColorStop(1,"#06198b");

context.fillStyle=radiusBg;

context.arc(circle.x,circle.y,circle.r,0,Math.PI*2);

context.fill();

context.restore();

}

};

for(var i =0;i<10;i++){

var obj={

x:random(-250,250),

y:random(-250,250),

z:random(-50,600),

r:random(10,20),

xspeed:random(0,10),

yspeed:random(0,10),

zspeed:random(0,20)

};

circles.push(obj);

}

setInterval(function(){

draw();

},50);

};