捣鼓了两天, 本来是想做一个旋转并排有序的圈. 结果出来了一个漩涡 </ 捂脸>
后来, 发现修改速度, 竟然弄出了个怪物 </ 再次捂脸 >
打开后静等 5S, 会有天使哦~
read me: 你可以修改 changeV 这个函数中的 count 峰值, 或者延时数值, 玩儿一下.
PS: 请务必玩儿坏 </ 笑 cry>
当速度超过一定值的时候, 判断 dx<1 会失效, 于是, 几个点就穿过去了.. 过去了... 去了...
从而达到了一个这个莫名其妙的动画.
于是, 你可以修改 if(dx<1 || dx> 300) 这个判断语句...
后来我干掉了 dx<1 就让所有点都穿过去, 于是, 一个动画又产生了
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</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> 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>
来源: http://www.qdfuns.com/article/39250/5559135fbc80447d5bfa615bc4df8224.html