canvas,一个脱离掌控的动画

sharminKid
sharminKid 发布于 7 天前 浏览:2103 类型:原创 - 随笔 分类:HTML/CSS - 动画 二维码: 作者原创 版权保护
捣鼓了两天,本来是想做一个旋转并排有序的圈。结果出来了一个漩涡</捂脸>
后来,发现修改速度,竟然弄出了个怪物</再次捂脸>
打开后静等5S,会有天使哦~
read me: 你可以修改changeV这个函数中的count峰值,或者延时数值,玩儿一下。
PS:请务必玩儿坏</笑cry>

当速度超过一定值的时候,判断dx<1会失效,于是,几个点就穿过去了。。过去了。。。去了。。。
从而达到了一个这个莫名其妙的动画。
于是,你可以修改if(dx<1 || dx > 300)这个判断语句。。。
后来我干掉了dx<1 就让所有点都穿过去,于是,一个动画又产生了
<!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>
标签:
z
给个赞 33 人点赞
收藏 35 人收藏
评论 已有 17 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
ccYL
ccYL7 天前1F
可以的,有助于睡眠
举报 支持 (6) 回复 (0)
最新评论
1024649179
1024649179前天 10:4117F
666666666666666666
举报 支持 (0) 回复 (0)
fantasyna
fantasyna4 天前16F
你这是时空隧道吧
举报 支持 (0) 回复 (0)
zhao_ping
zhao_ping6 天前15F
你是想把大家搞晕吧
举报 支持 (0) 回复 (0)
前端的路上有我
很炫酷啊
举报 支持 (0) 回复 (0)
sharminKid
sharminKid7 天前13F
emoticon //@wocacaca:眼睛疼,赔钱!!!
举报 支持 (0) 回复 (0)
sharminKid
sharminKid7 天前12F
竟还有这等奇效= =! //@lyj4532556:我已成功穿越
举报 支持 (0) 回复 (0)
sharminKid
sharminKid7 天前11F
在心里emoticon //@前端小新:天使在(=@__@=)哪里?
举报 支持 (0) 回复 (0)
wocacaca
wocacaca7 天前10F
眼睛疼,赔钱!!!
举报 支持 (0) 回复 (1)
前端小新
前端小新7 天前9F
天使在(=@__@=)哪里?
举报 支持 (0) 回复 (1)
1628916868l
1628916868l7 天前8F
大神啊,你这canvas功力,在下佩服
举报 支持 (0) 回复 (0)
Queen_5200
Queen_52007 天前7F
好炫酷哦emoticon
举报 支持 (0) 回复 (0)
lyj4532556
lyj45325567 天前6F
我已成功穿越
举报 支持 (0) 回复 (1)
叶绛攸
叶绛攸7 天前5F
看的有点头晕
举报 支持 (0) 回复 (0)
hugeannex
hugeannex7 天前4F
眼睛都花了。。。
举报 支持 (0) 回复 (0)
kait1314
kait13147 天前3F
我沉迷了。。。。。
举报 支持 (0) 回复 (0)
sharminKid sharminKid 作者

总有一条蜿蜒在童话镇里七彩的河

作者最新