web-交互设计：粒子发射器

最新推荐文章于 2023-06-20 15:16:13 发布

@lazypet~

最新推荐文章于 2023-06-20 15:16:13 发布

阅读量225

点赞数

分类专栏： Html和Css

本文链接：https://blog.csdn.net/qq_43323305/article/details/108727502

版权

Html和Css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Random Particles</title>
	</head>
	<body style="margin: 0;">
		<canvas></canvas>
	</body>
	<script src="./js/index.js"></script>
</html>

JS文件：

class CircleElem{
	constructor(){
		this.transparency = Math.random()
		this.color = `rgba(${255*Math.random()},${255*Math.random()},${255*Math.random()},${this.transparency})`
		this.radius = 10*Math.random()+1
		this.v = 5*Math.random()+1
		this.angle = 360*Math.random()
		this.x = centerX
		this.y = centerY
		
	}

	//传入画布
	draw(ctx){
		ctx.beginPath();
		ctx.arc(this.x,this.y,this.radius,0,2*Math.PI)
		ctx.closePath();
		ctx.fillStyle=this.color;
		ctx.fill();
	}
}

let arr = []
const CNT = 3
const canvas = document.querySelector('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
let centerX = canvas.width/2
let centerY = canvas.height/2
const ctx = canvas.getContext('2d')

function createCircle(){
	for(let i = 0;i<CNT;i++){
	let circle = new CircleElem()
	arr.push(circle)
}
}

createCircle()

function drawCircle(){
	ctx.clearRect(0,0,canvas.width,canvas.height);
	for(circle of arr){
		circle.y += circle.v*Math.sin(circle.angle);
		circle.x += circle.v * Math.cos(circle.angle);
		circle.transparency-=0.4
		circle.v+=0.5
		circle.draw(ctx)
	}
	createCircle()
	setTimeout(drawCircle,30);
}
	drawCircle()

实现效果：
在这里插入图片描述

@lazypet~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web-交互设计：粒子发射器

HTML文件：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Random Particles</title> </head> <body style="margin: 0;"> <canvas></canvas> </body> <script src="./js/ind
复制链接

扫一扫

专栏目录