canvas煙花動(dòng)畫(huà)
canvas煙花
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<meta http-equiv="X-UA-Compatible" content="IE=edge">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<title>Document</title>
? ?<style>
? ? ? ?* {
? ? ? ? ? ?margin: 0;
? ? ? ? ? ?padding: 0;
? ? ? ?}
? ? ? ?body {
? ? ? ? ? ?background: black;
? ? ? ? ? ?display: flex;
? ? ? ? ? ?justify-content: center;
? ? ? ? ? ?align-items: center;
? ? ? ? ? ?width: 100%;
? ? ? ? ? ?height: 100vh;
? ? ? ?}
? ? ? ?canvas {
? ? ? ? ? ?position: relative;
? ? ? ?}
? ?</style>
</head>
<body>
? ?<canvas id="canvas"></canvas>
? ?<script>
? ? ? ?var canvas = document.getElementById("canvas")
? ? ? ?canvas.width = window.innerWidth
? ? ? ?canvas.height = window.innerHeight
? ? ? ?var ctx = canvas.getContext("2d")
? ? ? ?var fireworksArray = []
? ? ? ?var particlesArray = []
? ? ? ?// 煙花綻放
? ? ? ?class Particle {
? ? ? ? ? ?constructor(x, y, color) {
? ? ? ? ? ? ? ?this.x = x
? ? ? ? ? ? ? ?this.y = y
? ? ? ? ? ? ? ?this.c = color
? ? ? ? ? ? ? ?this.vx = (0.5 - Math.random()) * 100
? ? ? ? ? ? ? ?this.vy = (0.5 - Math.random()) * 100
? ? ? ? ? ? ? ?this.age = Math.random() * 100 | 0
? ? ? ? ? ?}
? ? ? ? ? ?update() {
? ? ? ? ? ? ? ?this.x += this.vx / 20
? ? ? ? ? ? ? ?this.y += this.vy / 20
? ? ? ? ? ? ? ?this.vy++
? ? ? ? ? ? ? ?this.age--
? ? ? ? ? ?}
? ? ? ? ? ?draw() {
? ? ? ? ? ? ? ?ctx.globalAlpha = 1
? ? ? ? ? ? ? ?ctx.beginPath()
? ? ? ? ? ? ? ?ctx.fillStyle = this.c
? ? ? ? ? ? ? ?ctx.arc(this.x, this.y, 2, 0, Math.PI * 2)
? ? ? ? ? ? ? ?ctx.fill()
? ? ? ? ? ?}
? ? ? ?}
? ? ? ?// 煙花上升
? ? ? ?class Firework {
? ? ? ? ? ?constructor() {
? ? ? ? ? ? ? ?this.y = canvas.height
? ? ? ? ? ? ? ?this.x = Math.random() * canvas.width | 0
? ? ? ? ? ? ? ?this.vel = -(Math.random() * Math.sqrt(canvas.height) / 3 + Math.sqrt(4 * canvas.height) / 2) / 5
? ? ? ? ? ? ? ?this.c = "hsl(" + (Math.random() * 360 | 0) + ",100%,60%)"
? ? ? ? ? ?}
? ? ? ? ? ?update() {
? ? ? ? ? ? ? ?this.y += this.vel
? ? ? ? ? ? ? ?this.vel += 0.04
? ? ? ? ? ? ? ?if (this.vel >= 0) {
? ? ? ? ? ? ? ? ? ?for (var i = 0; i < 150; i++) {
? ? ? ? ? ? ? ? ? ? ? ?particlesArray.push(new Particle(this.x, this.y, this.c))
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?this.y = canvas.height
? ? ? ? ? ? ? ? ? ?this.x = Math.random() * canvas.width | 0
? ? ? ? ? ? ? ? ? ?this.vel = -(Math.random() * Math.sqrt(canvas.height) / 3 + Math.sqrt(4 * canvas.height) / 2) / 5
? ? ? ? ? ? ? ? ? ?this.c = "hsl(" + (Math.random() * 360 | 0) + ",100%,60%)"
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ? ? ?draw() {
? ? ? ? ? ? ? ?ctx.globalAlpha = 1
? ? ? ? ? ? ? ?ctx.beginPath()
? ? ? ? ? ? ? ?ctx.fillStyle = this.c
? ? ? ? ? ? ? ?ctx.arc(this.x, this.y, 3, 0, Math.PI * 2)
? ? ? ? ? ? ? ?ctx.fill()
? ? ? ? ? ?}
? ? ? ?}
? ? ? ?function init_fireworks() {
? ? ? ? ? ?for (var i = 0; i < (canvas.width / 200 | 0); i++) {
? ? ? ? ? ? ? ?fireworksArray.push(new Firework)
? ? ? ? ? ?}
? ? ? ?}
? ? ? ?init_fireworks()
? ? ? ?function draw() {
? ? ? ? ? ?ctx.globalAlpha = 0.1
? ? ? ? ? ?ctx.fillStyle = "black"
? ? ? ? ? ?ctx.fillRect(0, 0, canvas.width, canvas.height)
? ? ? ? ? ?for (var i = 0; i < fireworksArray.length; i++) {
? ? ? ? ? ? ? ?fireworksArray[i].update()
? ? ? ? ? ? ? ?fireworksArray[i].draw()
? ? ? ? ? ?}
? ? ? ? ? ?for (var i = 0; i < particlesArray.length; i++) {
? ? ? ? ? ? ? ?particlesArray[i].update()
? ? ? ? ? ? ? ?particlesArray[i].draw()
? ? ? ? ? ? ? ?if (particlesArray[i].age < 0) {
? ? ? ? ? ? ? ? ? ?particlesArray.splice(i, 1)
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ? ? ?requestAnimationFrame(draw)
? ? ? ?}
? ? ? ?draw()
? ?</script>
</body>
</html>標(biāo)簽：前端canvas動(dòng)畫(huà)
