Canvas 烟花效果
一个非常简陋的没什么含金量的小效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #cv { background: #000; } </style> </head> <body> <canvas id="cv"></canvas> <script> const cv = document.getElementById('cv'); const ctx = cv.getContext('2d'); const ctxFun = { cw: window.innerWidth, ch: window.innerHeight, initCv() { cv.width = this.cw; cv.height = this.ch; }, clean() { ctx.clearRect(0, 0, this.cw, this.ch); }, rn(x, y) { return Math.round(Math.random() * (y - x) + x); }, color() { return `${this.rn(80, 255)},${this.rn(80, 255)},${this.rn(80, 255)}`; }, line(sx, sy, ex, ey, w, c) { ctx.beginPath(); ctx.lineWidth = w; ctx.strokeStyle = c; ctx.moveTo(sx, sy); ctx.lineTo(ex, ey); ctx.stroke(); }, circle(x, y, r, c) { ctx.beginPath(); ctx.fillStyle = c; ctx.arc(x, y, r, 0, 2 * Math.PI); ctx.fill(); } }; class Line { static arr = []; static bg = ctxFun.color(); constructor(sx, sy, ex, ey) { this.sx = sx; this.sy = sy; this.ex = ex; this.ey = ey; this.opa = 1; } static draw() { Line.arr.forEach((item, i) => { ctxFun.line(item.sx, item.sy, item.ex, item.ey, 5, `rgba(${Line.bg}, ${item.opa})`); item.opa -= .05; if(item.opa <= 0) Line.arr.splice(i, 1); }); } } class Boom { static arr = []; constructor(x, y, r, bg, deg, sr, v) { this.x = x + sr * Math.cos(deg); this.y = y + sr * Math.sin(deg); this.r = r; this.v = v; this.deg = deg; this.bg = bg; this.opa = .01; } static draw() { this.arr.forEach((item, i) => { ctxFun.circle(item.x, item.y, item.r, `rgba(${item.bg},${item.opa})`); item.r = item.v > 0 ? item.r + .1 : item.r - .08; item.opa = item.v > 0 ? item.opa + .2 : item.r - .2; item.x += item.v <= 0 ? 0 : item.v * Math.cos(item.deg); item.y += item.v <= 0 ? .2 : (item.v * Math.sin(item.deg)); item.v -= item.v > 0 ? .04 : 0; if(item.opa <= 0) this.arr.splice(i, 1); }); } } const Game = { initFn() { ctxFun.initCv(); }, bindEvent() { window.onresize = () => { ctxFun.initCv(); }; let op = { x: null, y: null }; document.onmousemove = function(me) { const np = { x: me.offsetX, y: me.offsetY }; if(op.x) Line.arr.push(new Line(op.x, op.y, np.x, np.y)); op = np; }; cv.onclick = (e) => { const boomNum = ctxFun.rn(100, 400); const bg = ctxFun.color(); for(let i = 0; i < boomNum; i++) { const x = e.offsetX, y = e.offsetY, r = ctxFun.rn(1, 4), v = Math.random() * 2.4, deg = Math.random() * Math.PI * 2, sr = ctxFun.rn(0, 150); Boom.arr.push(new Boom(x, y, r, bg, deg, sr, v)); } }; }, bindAnimation() { setInterval(() => { ctxFun.clean(); Line.draw(); Boom.draw(); }, 10); setInterval(() => { Line.bg = ctxFun.color(); }, 5000); } }; Game.initFn(); Game.bindEvent(); Game.bindAnimation(); </script> </body> </html>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
1万+