您的位置：首页 > 编程语言

粒子动画-躁动的小球代码全

2017-12-25 10:02 267 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>

</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
//获取到canvas
var canvas = document.querySelector('#canvas');
//设置上下文对象
var ctx = canvas.getContext('2d');
//设置画布的宽 高
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;
//封装一个随机数函数
function randomFn(min,max){
return parseInt(Math.random()*(max-min) + min);
}
//创建关于小球的构造函数，x:x轴中心坐标点;y:y轴中心坐标点;size:小球半径；speedx:小球在x轴方向上的速度，speedy: 小球在y轴方向上的速度，
//color: 小球颜色
function Ball(x,y,size,speedx,speedy,color){
this.x = x;
this.y = y;
this.size = size;
this.speedX = speedx;
this.speedY = speedy;
this.color = color;
}
//绘制小球
Ball.prototype.draw = function () {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x,this.y,this.size,0,Math.PI*2);
ctx.fill();
}
//躁动的小球，核心思想不断改变小球的坐标，如果小球到达边界，则将速度设置为相反数，形成了反弹效果
Ball.prototype.run = function(){
//当小球处于快超过x轴边界时，取相反速度，就有了反弹效果
if(this.x + this.size >= w){
this.speedX = - this.speedX;
}
//当小球处于快超过y轴边界时，取相反速度，就有了反弹效果
if(this.y + this.size >= h){
this.speedY = - this.speedY;
}
if(this.x - this.size <= 0){
this.speedX = -this.speedX;
}
if(this.y - this.size <= 0){
this.speedY = -this.speedY;
}
//当小球的速度恰好随机为0时，小球是静止在页面上的，从体验角度上来说不太美观，所以当在x轴的速度与在y轴的速度同时为0时，重新定义速度
if(this.speedX == 0 && this.speedY == 0){
this.speeX = randomFn(-7,7);
this.speedY = randomFn(-7,7);
}

this.x += this.speedX;
this.y += this.speedY;
}

//当两个小球相撞或有重叠时，改变颜色
Ball.prototype.xiangzzhuang = function(){
for(var i = 0 ; i < balls.length; i++){
if(!(this === balls[i])){
//此处运用到了勾股定理
var dx = this.x - balls[i].x;
var dy = this.y - balls[i].y;
var distance = Math.sqrt(dx*dx+dy*dy);
if(distance < this.size + balls[i].size){
balls[i].color = this.color = 'rgb('+ randomFn(0,255) +',' + randomFn(0,255) + ',' + randomFn(0,255)  + ')';
}
}
}
}
var balls = [];
function loop(){
//绘制画布的背景颜色
ctx.fillStyle = 'rgba(0,0,0,0.3)';
ctx.fillRect(0,0,w,h);
//创建30个小球
while(balls.length < 30){
var ball = new Ball(
randomFn(0,w),
randomFn(0,h),
randomFn(10,20),
randomFn(-7,7),
randomFn(-7,7),
'rgb('+ randomFn(0,255) +',' + randomFn(0,255) + ',' + randomFn(0,255)  + ')'
)
balls.push(ball);
}

for(var i = 0; i < balls.length; i++){
balls[i].draw();
balls[i].run();
balls[i].xiangzzhuang();
}
//window提供的API动画，以电脑屏幕刷新频率为基准（16.6ms就刷新一次，人类肉眼根本觉察不到），所以不会造成动画卡顿的现象
window.requestAnimationFrame(loop);
}
loop();
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  canvas
相关文章推荐
新的分享
章节导航