css+js实现烟花效果
代码语言:html
所属分类:粒子
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Fireworks!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-image: linear-gradient(6deg, #214, #000);
background-size: 100% 100%;
}
canvas { display: block; }
</style>
</head>
<body translate="no">
<script>
class Vector2 {
constructor(x = 0, y = 0) {
this.x = x;
this.y = y;
}
add(v) {
this.x += v.x;
this.y += v.y;
return this;
}
multiplyScalar(s) {
this.x *= s;
this.y *= s;
return this;
}
clone() {
return new Vector2(this.x, this.y);
}}
class Time {
constructor() {
const now = Time.now();
this.delta = 0;
this.elapsed = 0;
this.start = now;
this.previous = now;
}
update() {
const now = Time.now();
this.delta = now - this.previous;
this.elapsed = now - this.start;
this.previous = now;
}
static now() {
return Date.now() / 1000;
}}
class Particle {
construc.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0