canvas实现烟花绽放动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现烟花绽放动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; background: black; overflow: hidden; } </style> </head> <body> <canvas id="fireworksCanvas"></canvas> <script > const canvas = document.getElementById("fireworksCanvas"); const ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } window.addEventListener("resize", resizeCanvas, false); class Firework { constructor() { this.x = Math.random() * canvas.width; this.y = canvas.height; this.sx = Math.random() * 3 - 1.5; this.sy = Math.random() * -3 - 3; this.size = Math.random() * 2 + 1; this.shouldExplode = false; const colorVal = Math.round(0xffffff * Math.random()); const r = colorVal >> 16; const g = colorVal >> 8 & 255; const b = colorVal & 255; this.r = r; this.g = g; this.b = b; } update() { if ( this.sy >= -2 || this.y <= 100 || this.x <= 0 || this.x >= canvas.width) { this.shouldExplode = true; } else { this.sy += 0.01; } this.x += this.sx; this.y += this.sy; } draw() { ctx.fillStyle = `rgb(${this.r},${this.g},${this.b})`; ctx.beginPath(); ctx.arc(this.x, this.y, t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0