萨塔尔独奏：Anijan母亲（测试碰撞粒子模块）
<style>@import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.css?v=1.0';
#tz { margin: 30px 0 30px calc(50% - 593px); 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>
<div id="hEdiv"><pre id="hEpre">
<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>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
</script> canvas画布粒子模块的引用在 17 行，配置 19 行。
关于配置：
形参至少1个，画布的宿主元素，例如， lz(tz) ，其中，tz 即为函数形参，帖子元素。
第二个参数时一个粒子配置对象，现在的脚本开放如下几个参数。举例如下——
var peizhi = {
total: 50, /* 粒子数 */
minSize: 5, /* 粒子最小尺寸 */
maxSize: 10, /* 粒子最大尺寸 */
color: 'white',/* 粒子颜色 */
};
lz(tz, peizhi);
若省略配置，将使用模块预设的默认配置。若只设置某些参数，则其余参数使用模块的配置。 canvas画布以像素为作画依据，这意味着画布的尺寸变动没有那么灵活，所以全屏切换粒子铺满父元素需要一点时间，粒子会从左向右、从上到下慢慢铺开。但这是理论上的判断，也许实际效果不是这样。 谢谢老师辛苦，欣赏学习了。{:4_190:} 马黑黑 发表于 2025-3-2 11:25
canvas画布粒子模块的引用在 17 行，配置 19 行。
关于配置：
把这个配置加上去试了一下，粒子数量变300，又改了颜色和大小，特别好看。。{:4_170:} 马黑黑 发表于 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画布以像素为作画依据，这意味着画布的尺寸变动没有那么灵活，所以全屏切换粒子铺满父元素需要一点时 ...
实际效果是，打开就瞬间铺满了呢{:4_187:} 这个就是AI给出的粒子代码吧，黑黑用到帖子中，真好看{:4_199:} 马黑黑 发表于 2025-3-2 12:26
没有超越边界的元素所以不用
我有时候做贴 时，视频有时候还需要超一超，所以时不时得请它出来 马黑黑 发表于 2025-3-2 12:26
粒子运动的一个依据就是边界，还有一个是碰撞
这个DS处理得相当美妙。。
我要看你的粒子JS文件，在地址栏打开汉字都是乱码，咋整
我记得你说过，但找不到笔记了{:4_173:} 花飞飞 发表于 2025-3-2 11:39
把这个配置加上去试了一下，粒子数量变300，又改了颜色和大小，特别好看。。
我也去试了一下，尤其把最大粒子改小点，更好看{:4_173:} 马黑黑 发表于 2025-3-2 12:27
粒子数量也多也消耗资源，手机端可能感觉明显
之前听你说过。粒子数量不宜过多，还记着呢。
不过刚才数字改大后人家也显示速度正常
手机端暂时还没机会感觉。。{:4_173:} 红影 发表于 2025-3-2 12:57
我也去试了一下，尤其把最大粒子改小点，更好看
嗯哪。。
颜色刚开始用了老师给的默认白，出来后吓一跳~~{:4_170:}
赶紧换了一种，最后感觉还是随机好看。。 看黑黑封装的里面，还有个例子参数 speed: 2 这个貌似去修改没什么用啊{:4_173:}