《遇见》帖子实现细节（兼谈lzwz.js用法）
本帖最后由 马黑黑 于 2024-4-26 10:40 编辑帖子链接：遇见 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! (huachaowang.com)
最近老梦见故友，因此想写一个帖子，以怀念曾经的美好时光。斯人已去，独有我还在心心念念着什么。
日出东方，唯我不败。当年的豪情与稚嫩，后来未能成就任何梦想，但日出的壮丽永远铭记于心。耀眼的太阳光芒，照亮了青春的身影，照亮了年轻的心。视频一将帖子背景中的太阳烘托一番，原令其贯穿帖子左右，后面觉得太夸张，宽度改成了 60%（08行代码，代码在原帖二楼）。视频二装饰右边的树，那可能是象征天真与稚气，它的底色不够纯黑，用 screen 融合到背景后还是有一点点痕迹，可以考虑加个透明度；注意这里的 left 值和 width 值的关系，二者加起来刚好是100%（09行代码）。
俩群飞翔的鸟，阐述天高任我飞的愿景。小鸟是帖子背景图的元素，两个伪元素就地取材，将小鸟分别装入自己的背景，并做幅度很小的关键帧动画。由于色差问题，关键帧动画确实不宜大幅度运动，会露馅，左边的其实已经有轻微露馅了。
帖子右下的粒子化文本，用 canvas 画布做成，代码量较大，所以封装成独立文件，地址和引用方法具体看 23~27 行。这里讲讲文本配置：
lzwz.js 引用之后，应配置 wz 对象：
var wz = {
papa: '#mydiv', /* 指定帖子元素 id 带 # 号，class 带 . 号 */
text: 'MEET YOU', /* 待输出文本 */
left: '620px', /* 画布左边值 */
top: '550px', /* 画布顶边值 */
color: 'lightblue'/* 前景色 支持 rgb 或 rgba 等表示法 */
};
其中，papa 参数必须配置；text 参数若不配置，会输出默认文本；left 和 top 若不配置，默认均为 10px；color 若不配置或空值 ''，则使用随机色。
可以通过 CSS 设置画布的宽高以外的大多数属性，比如帖子的文本输出效果是斜体的，其实这是用了 transform: skew(-15deg); 属性设置令其扭曲而已（10行代码）。lzwz.js 固定了文本尺寸，如果需要变小或变大一点，也可以通过 transform 来实现： transform: skew(-15deg) scale(0.8, 0.8); 。还有其他种种可能。不过需要注意的是，如果帖子上还有其他的画布，请通过CSS精准定位到它：lzwz.js 采用后追加方式加入画布，从层级关系上看它排在最后，假设帖子共已有了一个画布，可以这么定位它——
#mydiv > canvas:nth-of-type(2) { /* 相关代码 */ }
【其他说明】
lzwz.js 没有设置动画的开关；
粒子化文本会根据文字长短改变画布尺寸，它应该放在帖子的什么位置因此可能需要多次尝试；
待输出的文本不宜太长，lzwz.js 没有做折行处理；
粒子化文本特效仍在测试中，可靠性和稳定性可能存在未知因素。
网站看到新贴，有新效果。
想来看看说明。
遇见这么这么详细的专项说明。{:4_199:} 感谢楼主的无私分享，学习了，很详细的讲解。 看完这贴发现我现在用的电脑和网络把效果漏掉不少。。。。
原来还有两群小鸟飞翔状态。切换手机才看到。。{:4_170:}
太好了，transform: skew(-15deg) scale(0.8, 0.8);
看到了文字大小设置。
需要找个空来试一试。。{:4_199:} 南无月 发表于 2024-4-26 11:13
太好了，transform: skew(-15deg) scale(0.8, 0.8);
看到了文字大小设置。
需要找个空来试一试。。{:4_ ...
大胆尝试 南无月 发表于 2024-4-26 11:07
看完这贴发现我现在用的电脑和网络把效果漏掉不少。。。。
原来还有两群小鸟飞翔状态。切换手机才看到。。 ...
网络受限 愤怒的葡萄 发表于 2024-4-26 10:52
感谢楼主的无私分享，学习了，很详细的讲解。
中午好 南无月 发表于 2024-4-26 10:44
网站看到新贴，有新效果。
想来看看说明。
遇见这么这么详细的专项说明。
不知道说完了木有 马黑黑 发表于 2024-4-26 11:54
中午好
已经中午了，休息一会，下午做点事情。 这个上面的链接刚看了，好像代码的粒子效果，黑黑已经分享不少了 很详细的说明，学习了{:4_190:} 原来还能加入其他的canvas 画布呢，看到粒子文字就已经很不错了呢{:4_173:} “注意这里的 left 值和 width 值的关系，二者加起来刚好是100%”
嗯，这也是设置的技巧之一{:4_187:} 感谢黑黑的详细讲解，学习再学习{:4_187:} 马黑黑 发表于 2024-4-26 11:54
不知道说完了木有
详细的很。。
该说的都说完了。{:4_199:}
老师辛苦。。{:4_190:} 马黑黑 发表于 2024-4-26 11:53
网络受限
这事儿还真拿它无可奈何{:4_173:} 马黑黑 发表于 2024-4-26 11:53
大胆尝试
刚才得一小空试了下。。已经实现变小了用的0.8。。
改成1.8觉得不如小的清晰。。
应该是跟图片放大模糊道理一样。。{:4_187:}
南无月 发表于 2024-4-26 18:07
刚才得一小空试了下。。已经实现变小了用的0.8。。
改成1.8觉得不如小的清晰。。
应该是跟图片放大模糊 ...
道理在这里：
canvas画布基于像素工作，一个像素存储满量的信息，放大，则实际显示器内每一个像素的信息是不满量的，缩小则有富余。
想一想种子：种子的外壳包裹着果实仁，正常情况下这是一种几近满量状态。那么，现在你用放大镜看种子，种子增大了好几倍，但是，事实上，里面的果仁真的也增大了吗？ 南无月 发表于 2024-4-26 18:05
这事儿还真拿它无可奈何
教育网是严苛的