|
|
黑夜烟花绽放的效果实现
代码实现烟花绽放的效果图片：
实现的思路：
（1）确定自己想要实现的效果
（2）按照需求编辑代码
（3）首先明白在没有点击动作时候，烟花可以随机在黑夜中绽放
（4）然后在添加但我们需要的时候可以在我们需要的位置，单击鼠标，可以在电机的位置绽放烟花
（5）烟花扩散开的粒子，就是我们看到的绚烂的烟火星
主要的代码：
// 主演示循环
function loop() {
// 此函数将无休止地运行 requestAnimationFrame
requestAnimFrame( loop );
// 随着时间的推移增加色调以获得不同颜色的烟花
hue += 0.5;
// 通常，clearRect（） 将用于清除画布
// 我们想要创建一个尾随效果
//将复合操作设置为目标输出将使我们能够在特定的不透明度下清除画布，而不是完全擦除它
ctx.globalCompositeOperation = 'destination-out';
// 降低 alpha 属性以创建更突出的跟踪
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect( 0, 0, cw, ch );
// 将复合操作更改回我们的主模式
// 打火机在烟花和粒子相互重叠时产生明亮的高光点
ctx.globalCompositeOperation = 'lighter';
//循环播放每个烟花，绘制它，更新它
var i = fireworks.length;
while( i-- ) {
fireworks[ i ].draw();
fireworks[ i ].update( i );
}
// 循环遍历每个粒子，绘制它，更新它
var i = particles.length;
while( i-- ) {
particles[ i ].draw();
particles[ i ].update( i );
}
// 当鼠标没有下降时，自动向随机坐标发射烟花
if( timerTick >= timerTotal ) {
if( !mousedown ) {
//在屏幕底部中间开始燃放烟花，然后设置随机目标坐标，随机y坐标将在屏幕上半部分的范围内设置
fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
timerTick = 0;
}
} else {
timerTick++;
}
// 限制鼠标按下时烟花发射的速率
if( limiterTick >= limiterTotal ) {
if( mousedown ) {
//在屏幕底部中间启动烟花，然后将当前鼠标坐标设置为目标
fireworks.push( new Firework( cw / 2, ch, mx, my ) );
limiterTick = 0;
}
} else {
limiterTick++;
}
}
// 鼠标事件绑定
//在鼠标移动时更新鼠标坐标
canvas.addEventListener( 'mousemove', function( e ) {
mx = e.pageX - canvas.offsetLeft;
my = e.pageY - canvas.offsetTop;
});
// 切换鼠标按下状态并阻止选择画布
canvas.addEventListener( 'mousedown', function( e ) {
e.preventDefault();
mousedown = true;
});
canvas.addEventListener( 'mouseup', function( e ) {
e.preventDefault();
mousedown = false;
});
// 一旦窗户加载，我们就可以准备一些烟花了！
window.onload = loop;
</script>
//完整的代码获取：「2022年3月材料」https://www.aliyundrive.com/s/vKkiosHdySH[color=rgba(0, 0, 0, 0.85)]点击链接保存，或者复制本段内容，打开「阿里云盘」APP ，无需下载极速在线查看，视频原画倍速播放。 //代码来源：@风火轮技术团队，更多详情 请关注风火轮技术团队微信公众号
|
|
发表于 2022-3-9 11:52:02
