<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画反弹</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
box-shadow: 0px 0px 10px red;
position: absolute;
left:50px;
top: 50px;
}
</style>
</head>
<body>
<canvas id="canvas1" width="700px" height="700px">
<p>你的浏览器有待升级</p>
</canvas>
</body>
<script type="text/javascript">
//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.length;i++){
arr[i].draw();
arr[i].move();
}
window.requestAnimationFrame(ani);//定时器也可以。在这里确保运动更流畅
}
ani();
//随机函数
function rand(min,max) {
return parseInt(Math.random()*(max-min)+min);
}
</script>
</html>
点击查看更多内容
4人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦