<!doctype html> <html> <head> <meta charset="utf-8"> <title>五彩纸屑</title> <style> body { background: #333; }</style> </head> <body> <script> 'use strict' var _createClass = (function () { function defineProperties (target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor) } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor } }()) function _classCallCheck (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function') } } var Progress = (function () { function Progress () { var param = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0] _classCallCheck(this, Progress) this.timestamp = null this.duration = param.duration || Progress.CONST.DURATION this.progress = 0 this.delta = 0 this.progress = 0 this.isLoop = !!param.isLoop this.reset() } Progress.prototype.reset = function reset () { this.timestamp = null } Progress.prototype.start = function start (now) { this.timestamp = now } Progress.prototype.tick = function tick (now) { if (this.timestamp) { this.delta = now - this.timestamp this.progress = Math.min(this.delta / this.duration, 1) if (this.progress >= 1 && this.isLoop) { this.start(now) } return this.progress } else { return 0 } } _createClass(Progress, null, [{ key: 'CONST', get: function get () { return { DURATION: 1000 } } }]) return Progress }()) var Confetti = (function () { function Confetti (param) { _classCallCheck(this, Confetti) this.parent = param.elm || document.body this.canvas = document.createElement('canvas') this.ctx = this.canvas.getContext('2d') this.width = param.width || this.parent.offsetWidth this.height = param.height || this.parent.offsetHeight this.length = param.length || Confetti.CONST.PAPER_LENGTH this.yRange = param.yRange || this.height * 2 this.progress = new Progress({ duration: param.duration, isLoop: false }) this.rotationRange = typeof param.rotationLength === 'number' ? param.rotationRange : 10 this.speedRange = typeof param.speedRange === 'number' ? param.speedRange : 10 this.sprites = [] this.canvas.style.cssText = ['display: block', 'position: absolute', 'top: 0', 'left: 0', 'pointer-events: none'].join(';') this.render = this.render.bind(this) this.build() this.parent.append(this.canvas) this.progress.start(performance.now()) requestAnimationFrame(this.render) } Confetti.prototype.build = function build () { for (var i = 0; i < this.length; ++i) { var canvas = document.createElement('canvas') var ctx = canvas.getContext('2d') canvas.width = Confetti.CONST.SPRITE_WIDTH canvas.height = Confetti.CONST.SPRITE_HEIGHT canvas.position = { initX: Math.random() * this.width, initY: -canvas.height - Math.random() * this.yRange } canvas.rotation = this.rotationRange / 2 - Math.random() * this.rotationRange canvas.speed = this.speedRange / 2 + Math.random() * (this.speedRange / 2) ctx.save() ctx.fillStyle = Confetti.CONST.COLORS[Math.random() * Confetti.CONST.COLORS.length | 0] ctx.fillRect(0, 0, canvas.width, canvas.height) ctx.restore() this.sprites.push(canvas) } } Confetti.prototype.render = function render (now) { var progress = this.progress.tick(now) this.canvas.width = this.width this.canvas.height = this.height for (var i = 0; i < this.length; ++i) { this.ctx.save() this.ctx.translate(this.sprites[i].position.initX + this.sprites[i].rotation * Confetti.CONST.ROTATION_RATE * progress, this.sprites[i].position.initY + progress * (this.height + this.yRange)) this.ctx.rotate(this.sprites[i].rotation) this.ctx.drawImage(this.sprites[i], -Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)) / 2, -Confetti.CONST.SPRITE_HEIGHT / 2, Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)), Confetti.CONST.SPRITE_HEIGHT) this.ctx.restore() } requestAnimationFrame(this.render) } _createClass(Confetti, null, [{ key: 'CONST', get: function get () { return { SPRITE_WIDTH: 9, SPRITE_HEIGHT: 16, PAPER_LENGTH: 100, DURATION: 4000, ROTATION_RATE: 50, COLORS: ['#EF5350', '#EC407A', '#AB47BC', '#7E57C2', '#5C6BC0', '#42A5F5', '#29B6F6', '#26C6DA', '#26A69A', '#66BB6A', '#9CCC65', '#D4E157', '#FFEE58', '#FFCA28', '#FFA726', '#FF7043', '#8D6E63', '#BDBDBD', '#78909C'] } } }]) return Confetti }()); ((elm) => { var DURATION = 8000 var LENGTH = 100 /* eslint-disable no-new */ new Confetti({ elm: elm, window.innerWidth, height: window.innerHeight, length: LENGTH, duration: DURATION }) setTimeout(function () { new Confetti({ elm: elm, window.innerWidth, height: window.innerHeight, length: LENGTH, duration: DURATION }) }, DURATION / 2) })() </script> </div> </body> </html>