canvas粒子线条旋转动画背景效果代码-html代码-BFW代码库

canvas粒子线条旋转动画背景效果代码

代码语言：html

所属分类：背景

代码描述：canvas粒子线条旋转动画背景效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,html {
    	margin:0;
    	overflow:hidden;
    	padding:0
    }
    </style>
</head>

<body>
    <script>
        var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = window.innerWidth, canvas.height = window.innerHeight;
canvas.style.background = "rgba(0, 0, 0,1)";

var ctx = canvas.getContext('2d');

const colors = ['#D9EAF9','#32B7F4', '#2E49E0', '#182098'];

var Star = function (x,y,radius,size,color) {
	this.radians = Math.random() * (Math.PI *2);

	this.x = x + Math.cos(this.radians) * radius;
	this.y = y + Math.sin(this.radians) * radius;

	this.radius = radius;
	this.color = color;
	this.size = size;

	this.last = {x:x, y : y}
	this.alpha = 0, this.temp = 0;
	this.update = () => {
		const lastPos = {x:this.x, y:this.y}

		if(this.temp > 1) {
			this.alpha -= 0.008;
		} else {
			this.temp += 0.008;
			this.alpha += 0.008;
		}

		if(this.alpha <= 0) this.alpha =0

		this.radians += Math.random() * 0.05;	
		this.x = this.last.x + Math.cos(this.radians) * this.radius;
		this.y = this.last.y + Math.sin(this.radians) * this.radius;

		this.draw(lastPos);
	}

	this.draw = (lastPos) => {
		ctx.save();
		ctx.beginPath();
		ctx.strokeStyle = this.color;
		ctx.lineWidth = this.size;
		ctx.moveTo(lastPos.x, lastPos.y);
		ctx.lineTo(this.x, this.y );
		ctx.globalAlpha = this.alpha
		ctx.stroke().........完整代码请登录后点击上方下载按钮下载查看