HTML5 Canvas绘制银河系特效（鼠标点击拖动一下看效果）-html代码-BFW代码库

HTML5 Canvas绘制银河系特效（鼠标点击拖动一下看效果）

代码语言：html

所属分类：粒子

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Canvas绘制银河系特效</title>

<style>
body {
	margin:0;
}
canvas {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
</style>

</head>
<body>

<script type="text/javascript">
    var w = window.innerWidth;
	var h = window.innerHeight;

	var dustCanvas = document.createElement('canvas');
	var dustCtx = dustCanvas.getContext('2d');
	var starCanvas = document.createElement('canvas');
	var starCtx = starCanvas.getContext('2d');

	document.body.appendChild(dustCanvas);
	document.body.appendChild(starCanvas);

	dustCanvas.width = starCanvas.width = w;
	dustCanvas.height = starCanvas.height = h;

	dustCtx.globalCompositeOperation = 'lighter';
	starCtx.globalCompositeOperation = 'lighter';

	var galaxies = [];

	var mouse = {
	  pos: {
		x: w * 0.5,
		y: h * 0.5
	  },
	  speed: 0
	};

	var randomNumbers = length => Array.from(new Array(length), () => Math.random());
	var PI = Math.PI;
	var TAU = PI * 2;
	var r = () => Math.random();
	var angle2 = (p1,p2) => Math.atan2(
	  p2[1]-p1[1],
	  p2[0]-p1[0]
	);
	var distance2 = (p1,p2) => Math.sqrt(
	  Math.pow(p1[0]-p2[0], 2) + 
	  Math.pow(p1[1]-p2[1], 2)
	);

	var createDustParticle = (color) => {
	  
	  var canvas = document.createElement('canvas');
	  
	  var w = 100;
	  var h = 100;
	  var cx = w * 0.5;
	  var cy = h * 0.5;
	  
	  canvas.width = w;
	  canvas.height = h;
	  var ctx = canvas.getContext('2d');
	  canvas.ctx = ctx;
	  
	  var xRand = -5 + (r()*10);
	  var yRand = -5 + (r()*10);
	  var xRand2 = 10 + (r()*(cx/2));
	  var yRand2 = 10 + (r()*(cy/2));
	  
	  var color = color || {
		r: Math.round(150+(r()*100)),
		g: Math.round(50+(r()*100)),
		b: Math.round(50+(r()*100))
	  };
	  
	  ctx.fillStyle = `rgba(${color.r},${color.g},${color.b},.02)`;
	  
	  Array
		.from(new Array(200), () => randomNumbers(3))
		.forEach( (p,i,arr) => {
		  var length = arr.length;
		  
		  var x = Math.cos( TAU/xRand/length*i ) * p[2]*xRand2 + cx;
		  var y = Math.sin( TAU/yRand/length*i ) * p[2]*yRand2 + cy;
		  
		  ctx.beginPath();
		  ctx.moveTo(x, y);
		  ctx.arc(x, y, p[2]*4, 0, TAU);
		  ctx.fill();
		
		});
	  
		return canvas;
	};

	var Galaxy = function(x,y) {
	  
	  var g = this;
	  
	  g.x = x;
	  g.y = y;
	  g.stars = [];
	  g.dust = [];
	  g.drag = r();
	  
	  g.angleOffsetX = TAU*r();
	  g.angleOffsetY = TAU*r();
	  g.realAngleOffsetX = 0;
	  g.realAngleOffsetY = 0;
	  
	  g.color = {
		r: Math.round(50+(r()*100)),
		g: Math.round(50+(r()*100)),
		b: Math.round(150+(r()*100))
	  };
	  
	  var calculateStarDustParams = o => {
		o.angle = angle2([g.x,g.y], [o.x,o.y]);
		o.distance = distance2([g.x,g.y], [o.x,o.y]);
		o.xAspect = [o.x/o.y];
		o.yAspect = [o.y/o.x];
	  };
	  
	  g.calculateCenter = () => {
		if (!g.stars.length) return;
		g.x = g.stars
		  .map(s => s.x)
		  .reduce((previous,current) => previous + current)
		  / g.stars.length;
		
		g.y = g.stars
		  .map(s => s.y)
		  .reduce((previous,current) => previous + current)
		  / g.stars.length;
		
		g.stars.forEach(calculateStarDustParams);
		g.dust.forEach(calculateStarDustParams);
	  };
	  
	};

	var Star = function(x, y, spread) {
	  var s = this;
	  s.x = x + Math.cos(TAU*r()) * spread;
	  s.y = y + Math.sin(TAU*r()) * spread;
	  s.radius = r()+0.25;
	  s.speed = r();
	};

	var Dust .........完整代码请登录后点击上方下载按钮下载查看