canvas星空连线背景特效

最新推荐文章于 2024-08-28 21:44:39 发布

ZNE、

最新推荐文章于 2024-08-28 21:44:39 发布

阅读量4.9k

点赞数 1

本文链接：https://blog.csdn.net/qq_38503329/article/details/79919294

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas星空连线背景特效</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			#canvas{
				display: block;
				background: #000;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<script>
			function Starry(){
				this.cxt=canvas.getContext("2d");
				canvas.width=window.innerWidth;
				canvas.height=window.innerHeight;
				this.cW=canvas.width;
				this.cH=canvas.height;
				this.num=200;
				this.data=[];
			}
			Starry.prototype={
				init: function(){
					for (var i=0;i<this.num;i++) {
						this.data[i]={
							x:Math.random()*this.cW,
							y:Math.random()*this.cH,
							cX:Math.random()*0.6-0.3,
							cY:Math.random()*0.6-0.3
						};
						this.drawCircle(