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 an.........完整代码请登录后点击上方下载按钮下载查看

网友评论0