<h1>bouncing balls</h1>    <canvas></canvas>

html, body {  margin: 0;}body {  overflow: hidden;//  height: inherit;//这两句很重要，是宽高100%的重要因素之一}h1 {  font-size: 2rem;  letter-spacing: -1px;  position: absolute;  margin: 0;  top: -4px;  right: 5px;  color: transparent;  text-shadow: 0 0 4px white;}

var canvas = document.querySelector(‘canvas‘);var ctx = canvas.getContext(‘2d‘);var width = canvas.width = window.innerWidth;var height = canvas.height = window.innerHeight;//这两句也是宽高100%的重要因素之一var balls=[];// 随机数函数function random(min,max) {    var num = Math.floor(Math.random()*(max-min)) + min;    return num;}//Ball构造器function Ball(x,y,vX,vY,color,size){    this.x=x;    this.y=y;    this.vX=vX;    this.vY=vY;    this.color=color;    this.size=size;}Ball.prototype.init=function(){    ctx.beginPath();    ctx.fillStyle=this.color;    ctx.arc(this.x,this.y,this.size,0,2*Math.PI);    ctx.fill();}Ball.prototype.update=function(){    if(this.x+this.size>=width||this.x-this.size<=0){        this.vX=-this.vX;    this.color=‘rgb(‘+random(0,255)+‘,‘+random(0,255)+‘,‘+random(0,255)+‘)‘;    }    if(this.y+this.size>=height||this.y-this.size<=0){        this.vY=-this.vY;        this.color=‘rgb(‘+random(0,255)+‘,‘+random(0,255)+‘,‘+random(0,255)+‘)‘;    }    this.x+=this.vX;    this.y+=this.vY;}//用来循环调用的函数function fool(){    //这两句很重要！！！！！    //每次调用这个函数就重新对整个canvas容器填充一次，不然上一帧留下的球是不会消失的    //而且rgba最后一个透明度用0.25效果超级好！    //每次覆盖涂色透明度0.25，不会把上一帧的图完全覆盖，4个帧之内有一种渐变得效果    ctx.fillStyle = ‘rgba(0, 0, 0, 0.25)‘;    ctx.fillRect(0, 0, width, height);    //产生随机参数小球    while(balls.length<30){        var ball=new Ball(random(20,width-20),            random(20,height-20),            random(-10,10),            random(-10,10),            ‘rgb(‘+random(0,255)+‘,‘+random(0,255)+‘,‘+random(0,255)+‘)‘,            random(10,20));        balls.push(ball);    }    //对所有小球执行函数    for(var i=0;i<balls.length;i++){        balls[i].init();        balls[i].update();    }// requestAnimationFrame(fool());//这个是比setInterval()性能更好的一种解决方案，但是兼容性还不够好}setInterval("fool()",20);