html跳动的小球,canvas绘制跳动的小球

动画反弹

*{

margin:0;

padding:0;

}

canvas1{

box-shadow: 0px 0px 10px red;

position: absolute;

left:50px;

top: 50px;

}

你的浏览器有待升级

//1.获取元素

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

//2.绘制环境

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

function round(x,y,r,color,speedx,speedy) {

this.x = x;

this.y = y;

this.r = r;

this.color = color;

this.speedx = speedx;

this.speedy = speedy;

//绘制

this.draw = function () {

context.beginPath();

context.fillStyle = this.color;

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

context.fill();

}

//动画

this.move = function () {

if(this.x>canvas.width-2*this.rthis.x-this.r<0){

this.speedx *= -1;//条件范围u内运动反弹

}

if(this.y>canvas.height-2*this.rthis.y-this.r<0){

this.speedy *= -1;

}

this.x += this.speedx;

this.y += this.speedy;

}

}

//许多球的绘制

var arr = [];

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

var x = rand(30,470);

var y = rand(30,470);

var r = rand(7,22);

var speedx = rand(1,7);

var speedy = rand(2,8);

var color="rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")";

var rounds = new round(x,y,r,color,speedx,speedy);

arr.push(rounds);

}

//得到了10个不同样式的小球,并将其存放在数组里

function ani() {

context.clearRect(0,0,canvas.width,canvas.height);

//将数组里的小球分别进行绘制在画布中

for(var i=0;i

arr[i].draw();

arr[i].move();

}

window.requestAnimationFrame(ani);//定时器也可以。在这里确保运动更流畅

}

ani();

//随机函数

function rand(min,max) {

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

}