0 喜欢

【Canvas学习】碎纸片掉落效果

admin
admin
2022-07-27 23:47:22 阅读 63

效果预览

下载.png

在线Demo

核心代码

const canvas = document.getElementById("mycan"); const ctx = canvas.getContext("2d"); const confettiCount = 20; const gravityConfetti = 0.3; const gravitySequins = 0.55; const dragConfetti = 0.075; const dragSequins = 0.02; const terminalVelocity = 3; const randomRange = (min, max) => Math.random() * (max - min) + min; canvas.setAttribute("width", window.innerWidth); canvas.setAttribute("height", window.innerHeight); const colors = [ { front: "#7b5cff", back: "#6245e0" }, // Purple { front: "#b3c7ff", back: "#8fa5e5" }, // Light Blue { front: "#5c86ff", back: "#345dd1" }, // Darker Blue ]; const confettis = []; class Confetto { constructor(cx, cy) { this.randomModifier = randomRange(0, 99); this.color = colors[Math.floor(randomRange(0, colors.length))]; this.dimensions = { x: randomRange(5, 9), y: randomRange(8, 15) }; this.clients = { x: cx, y: cy }; this.position = { x: cx, y: cy }; this.scale = { x: 1, y: 1 }; this.rotation = randomRange(0, 2 * Math.PI); this.velocity = { x: randomRange(-9, 9), y: -randomRange(6, 11) }; } update() { this.velocity.x -= this.velocity.x * dragConfetti; this.velocity.y = Math.min( this.velocity.y + gravityConfetti, terminalVelocity ); this.velocity.x += Math.random() > 0.5 ? Math.random() : -Math.random(); this.position.x += this.velocity.x; this.position.y += this.velocity.y; this.scale.y = Math.cos((this.position.y + this.randomModifier) * 0.09); } } function render() { ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); confettis.forEach(drawConfetti); window.requestAnimationFrame(render); } function drawConfetti(confetti, index) { confetti.forEach((confetto, index2) => { let width = confetto.dimensions.x * confetto.scale.x; let height = confetto.dimensions.y * confetto.scale.y; ctx.translate(confetto.position.x, confetto.position.y); ctx.rotate(confetto.rotation); confetto.update(); ctx.fillStyle = confetto.scale.y > 0 ? confetto.color.front : confetto.color.back; ctx.fillRect(-width / 2, -height / 2, width, height); ctx.setTransform(1, 0, 0, 1, 0, 0); if (confetto.position.y >= canvas.height) { confetti.splice(index2, 1); } }); if (confetti.length === 0) { confettis.splice(index, 1); } } function clickFn({ clientX, clientY }) { let confetti = []; for (let i = 0; i < confettiCount; i++) { confetti.push(new Confetto(clientX, clientY)); } confettis.push(confetti); } canvas.addEventListener("click", clickFn); render();

关于作者
admin
admin
admin@ifront.net
 获得点赞 58
 文章阅读量 79810
文章标签