前端ABC打开后静等5S，会有天使哦~非常的炫酷。
read me: 你可以修改changeV这个函数中的count峰值，或者延时数值，玩儿一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>qdabc.cn</title>
</head>
<style>
body{background:black; overflow: hidden;}
</style>
<body>
<script>
function getRandom(min, max){
return Math.floor(Math.random()*(max-min)+min);
}
function Canvas(){
this.pos = [];
this.numMax = 768;
this.width = window.innerWidth;
this.height = window.innerHeight;
this.rx = this.width/2;
this.ry=this.height/2;
this.cxt;
this.v = 1.25; //点的速度
this.dcolor=2;
}
// 创建节点、设置属性、获取对象
Canvas.prototype.createEle = function(){
var ele = document.createElement("canvas");
ele.id = "canvas";
ele.value = "sorry,your browser can not support canvas!";
ele.width = this.width;
ele.height = this.height;
this.cxt = ele.getContext('2d');
document.body.appendChild(ele);
}
Canvas.prototype.setCircle = function(){
var color, flag;
for(var i=0; i<this.numMax;i++){
var r = ((i/128)+1 )*40; //距离圆心初始半径，一共6层
var rotate = (i%128)*2.8125*(Math.PI/180); //一层128个，夹角2.8125
flag = i/128;
if( 0 <= flag && flag < 1.0){
color = 'rgb(255,0,'+(i%128)*canvas.dcolor+')';
}else if(1.0 <= flag && flag < 2.0){
color = 'rgb('+(255-(i%128)*canvas.dcolor)+',0,255)';
}else if(2.0 <= flag && flag < 3){
color = 'rgb(0,'+(i%128)*canvas.dcolor+',255)';
}else if(3 <= flag && flag < 4){
color = 'rgb(0,255,'+(255-(i%128)*canvas.dcolor)+')';
}else if(4 <= flag && flag < 5){
color = 'rgb('+(i%128)*canvas.dcolor+',255,0)';
}else if(5 <= flag && flag < 6){
color = 'rgb(255,'+(255-(i%128)*canvas.dcolor)+',0)';
}
this.pos[i] = {
r_max: 240, //6层间隔40,最大240
rotate: rotate,//所在点的相对角度
x: r*Math.cos(rotate)+this.width/2,
y: r*Math.sin(rotate)+this.height/2,
color: color,
}
}
}
Canvas.prototype.draw = function(x,y,r,color){
this.cxt.save();
this.cxt.beginPath();
this.cxt.fillStyle = color;
this.cxt.arc(x, y, r, 0, Math.PI*2, true);
this.cxt.fill();
this.cxt.restore();
}
Canvas.prototype.animate = function(){
var dx;
canvas.cxt.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<canvas.pos.length-1;i++){
dx = Math.sqrt(Math.pow(canvas.ry - canvas.pos[i].y, 2)+Math.pow(canvas.rx - canvas.pos[i].x, 2));
if( dx < 1 || dx > 300){
// 重置位置
canvas.pos[i].x = canvas.pos[i].r_max*Math.cos(canvas.pos[i].rotate)+canvas.width/2;
canvas.pos[i].y = canvas.pos[i].r_max*Math.sin(canvas.pos[i].rotate)+canvas.height/2;
}
//速度
canvas.pos[i].vx = -canvas.v*Math.cos(canvas.pos[i].rotate);
canvas.pos[i].vy = -canvas.v*Math.sin(canvas.pos[i].rotate);
// 移动
canvas.pos[i].x += canvas.pos[i].vx;
canvas.pos[i].y += canvas.pos[i].vy;
// 大小渐变
canvas.pos[i].r = Math.sqrt(Math.pow(canvas.ry - canvas.pos[i].y, 2)+Math.pow(canvas.rx - canvas.pos[i].x, 2))/80;
canvas.draw(canvas.pos[i].x, canvas.pos[i].y, canvas.pos[i].r, canvas.pos[i].color);
}
window.requestAnimationFrame(canvas.animate);
}
Canvas.prototype.changeV = function(){
var count = 1;
setInterval(function(){
canvas.v = 1.25 * Math.pow(2, count);
if(count++ > 3) {count = 1;}
},5000);
}
var canvas = new Canvas();
canvas.createEle();
canvas.setCircle();
canvas.animate();
canvas.changeV();
</script>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » canvas，一个脱离掌控的动画