湛江免费企业建站_注册公司需要多久_网络营销运营公司_百度游戏排行榜风云榜

基础效果：

前端安装并引入canvas-confetti包
如有问题请使用满血版DeepSeek/国内直连GPT/Claude解答

1.安装

npm install --save canvas-confetti

2.在前端代码中引用

import confetti from 'canvas-confetti';

2.在前端代码中使用

把下面这个直接放到你的函数里面，调用即可，调用时机由自己控制，比如成功状态或者其他时机

        confetti({particleCount: 100,spread: 70,origin: { y: 0.6 }});

以上是基础撒花效果

3.更多示例

3.1随机方向撒花

代码配置如下：

          function randomInRange(min, max) {return Math.random() * (max - min) + min;}confetti({angle: randomInRange(55, 125),spread: randomInRange(50, 70),particleCount: randomInRange(50, 100),origin: { y: 0.6 }});

3.2更多粒子下/更真实特效

var count = 200;
var defaults = {origin: { y: 0.7 }
};function fire(particleRatio, opts) {confetti({...defaults,...opts,particleCount: Math.floor(count * particleRatio)});
}fire(0.25, {spread: 26,startVelocity: 55,
});
fire(0.2, {spread: 60,
});
fire(0.35, {spread: 100,decay: 0.91,scalar: 0.8
});
fire(0.1, {spread: 120,startVelocity: 25,decay: 0.92,scalar: 1.2
});
fire(0.1, {spread: 120,startVelocity: 45,
});

3.3 星光特效

var defaults = {spread: 360,ticks: 50,gravity: 0,decay: 0.94,startVelocity: 30,colors: ['FFE400', 'FFBD00', 'E89400', 'FFCA6C', 'FDFFB8']
};function shoot() {confetti({...defaults,particleCount: 40,scalar: 1.2,shapes: ['star']});confetti({...defaults,particleCount: 10,scalar: 0.75,shapes: ['circle']});
}setTimeout(shoot, 0);
setTimeout(shoot, 100);
setTimeout(shoot, 200);