萨塔尔独奏：Anijan母亲（测试碰撞粒子模块）

马黑黑

马黑黑

<style>
	@import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.css?v=1.0';
	#tz { margin: 30px 0 30px calc(50% - 513px); background: url('https://638183.freep.cn/638183/t24/webp3/liig.webp') no-repeat center/cover; }
	#mplayer { width: 640px; bottom: 10px; background: none; box-shadow: none; color: snow; }
	#mplayer img { filter: invert(.8); }
	#fsbtn { top: 20px; border-color: snow; color: snow; }
	#lrc { bottom: 50px; }
</style>

<div id="tz" class="pa">
	<audio src="https://music.163.com/song/media/outer/url?id=1427936950"></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/11/48/17/video63633a01b9973.mp4" autoplay loop muted></video>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.js?v=1.0';
	import { lz } from 'https://638183.freep.cn/638183/web/lizi/canvasparticles.js';
	hcplay(tz);
	lz(tz, {total: 100});
</script>

马黑黑

canvas画布粒子模块的引用在 17 行，配置 19 行。

关于配置：

形参至少1个，画布的宿主元素，例如， lz(tz) ，其中，tz 即为函数形参，帖子元素。

第二个参数时一个粒子配置对象，现在的脚本开放如下几个参数。举例如下——

var peizhi = {
    total: 50, /* 粒子数 */
    minSize: 5, /* 粒子最小尺寸 */
    maxSize: 10, /* 粒子最大尺寸 */
    color: 'white',  /* 粒子颜色 */
};
lz(tz, peizhi);

若省略配置，将使用模块预设的默认配置。若只设置某些参数，则其余参数使用模块的配置。

马黑黑

canvas画布以像素为作画依据，这意味着画布的尺寸变动没有那么灵活，所以全屏切换粒子铺满父元素需要一点时间，粒子会从左向右、从上到下慢慢铺开。但这是理论上的判断，也许实际效果不是这样。

梦江南

谢谢老师辛苦，欣赏学习了。

花飞飞

马黑黑 发表于 2025-3-2 11:25
canvas画布粒子模块的引用在 17 行，配置 19 行。

关于配置：

把这个配置加上去试了一下，粒子数量变300，又改了颜色和大小，特别好看。。

花飞飞

马黑黑 发表于 2025-3-2 11:27
canvas画布以像素为作画依据，这意味着画布的尺寸变动没有那么灵活，所以全屏切换粒子铺满父元素需要一点时 ...

这个也挺有意思，看着它自己慢慢铺开。。再碰边返回，跟个聪 明的孩子一样一直在找边沿。。

花飞飞

白老师最近的贴子里都不用overflow: hidden;范围也控得刚刚好，这个就很神奇了。。

马黑黑

花飞飞 发表于 2025-3-2 11:42
白老师最近的贴子里都不用overflow: hidden;范围也控得刚刚好，这个就很神奇了。。

没有超越边界的元素所以不用

马黑黑

花飞飞 发表于 2025-3-2 11:41
这个也挺有意思，看着它自己慢慢铺开。。再碰边返回，跟个聪 明的孩子一样一直在找边沿。。

粒子运动的一个依据就是边界，还有一个是碰撞

马黑黑

花飞飞 发表于 2025-3-2 11:39
把这个配置加上去试了一下，粒子数量变300，又改了颜色和大小，特别好看。。

粒子数量也多也消耗资源，手机端可能感觉明显

马黑黑

梦江南 发表于 2025-3-2 11:33
谢谢老师辛苦，欣赏学习了。

这个模块测试中，实际上是半成品，还未严谨审核

红影

马黑黑 发表于 2025-3-2 11:27
canvas画布以像素为作画依据，这意味着画布的尺寸变动没有那么灵活，所以全屏切换粒子铺满父元素需要一点时 ...

实际效果是，打开就瞬间铺满了呢

红影

这个就是AI给出的粒子代码吧，黑黑用到帖子中，真好看

花飞飞

马黑黑 发表于 2025-3-2 12:26
没有超越边界的元素所以不用

我有时候做贴 时，视频有时候还需要超一超，所以时不时得请它出来

花飞飞

马黑黑 发表于 2025-3-2 12:26
粒子运动的一个依据就是边界，还有一个是碰撞

这个DS处理得相当美妙。。
我要看你的粒子JS文件，在地址栏打开汉字都是乱码，咋整
我记得你说过，但找不到笔记了

红影

花飞飞 发表于 2025-3-2 11:39
把这个配置加上去试了一下，粒子数量变300，又改了颜色和大小，特别好看。。

我也去试了一下，尤其把最大粒子改小点，更好看

花飞飞

马黑黑 发表于 2025-3-2 12:27
粒子数量也多也消耗资源，手机端可能感觉明显

之前听你说过。粒子数量不宜过多，还记着呢。
不过刚才数字改大后人家也显示速度正常
手机端暂时还没机会感觉。。

花飞飞

红影 发表于 2025-3-2 12:57
我也去试了一下，尤其把最大粒子改小点，更好看

嗯哪。。
颜色刚开始用了老师给的默认白，出来后吓一跳~~
赶紧换了一种，最后感觉还是随机好看。。

红影

看黑黑封装的里面，还有个例子参数 speed: 2 这个貌似去修改没什么用啊