加林森 发表于 2022-8-8 10:05
好精艳的制作，真漂亮。感觉还是立体的。老黑真厉害！
画布虽然支持3d画笔，但目前还在实验阶段，多数浏览器对3d画笔的支持还不行，所以基本都是用2d画笔的。立体感如有，不是canvas弄出来，是整体的效果
马黑黑 发表于 2022-8-8 12:34
画布虽然支持3d画笔，但目前还在实验阶段，多数浏览器对3d画笔的支持还不行，所以基本都是用2d画笔的。立 ...
嗯嗯。我电脑与手机上看见的都是立体的。
红影 发表于 2022-8-8 08:51
也就是每次刷新是画出背景图和它上面的随机小球吧，但随机小球本来就是均布的，怎样能造成是在上行的感觉， ...
页面打开的时候，小球是随机分布，然后按各自设定好的速度上移，移出后改变存储小球的数组数据，主要是位置、半径，这个事由 update 函数做，上移速度是随机的，xy坐标，x随机，y在底部，半径随机。
本帖最后由 马黑黑 于 2022-8-8 12:55 编辑
红影 发表于 2022-8-8 08:58
dotAr.y -= (7 - dotAr.r) / 10;
这个数据为什么这样取？
先说小球半径。对象 dotAr (key是数组下标内任意数）有三个属性，它们已经在创建函数的时候赋值，后面又通过 update 函数在小球移出顶线后随机或不随机赋值（重新安置时的Y坐标不随机，在底线）：
dotAr.x - X坐标
dotAr.y - Y坐标
dotAr.r - 半径
再说珠子大小。半径决定其大小，半径计算中，工具函数 Math.random() * 5 将得到 0 - 5 之间的浮点数（会有0，所以本帖不够严谨，严谨的话应再加上一个数，如加1什么的）。
至于珠子上升的依据，就是你说的这句，
dotAr.y -= (7 - dotAr.r) / 10;
半径不会超过 5，7减去5还有2，然后除以10，那么，上升的速率就在0.2上下幅度，这是处于缓慢而平滑上升设计的，可根据需要另外设计算式。为什么Y坐标要用 -= ？因为上升，Y坐标为0时是在顶线，而珠子的Y坐标值，不论是初始时还是重置时，都大于0，所以需要持续减去一定值对象才会上升。
加林森 发表于 2022-8-8 12:36
嗯嗯。我电脑与手机上看见的都是立体的。
这是整体效果
马黑黑 发表于 2022-8-8 12:56
这是整体效果
是的，我在跟到学习。
马黑黑 发表于 2022-8-8 08:01
这叫刷屏吧，以前的画外音之类的变迁
弄得俺找不到回家路了{:4_173:}
马黑黑 发表于 2022-8-8 12:31
我在文本特效那里有类似的代码
木明白{:4_203:}
樵歌 发表于 2022-8-8 16:57
木明白
去我的地儿看看应该可以明白
樵歌 发表于 2022-8-8 16:56
弄得俺找不到回家路了
那就不回家
加林森 发表于 2022-8-8 13:31
是的，我在跟到学习。
挺好挺好
马黑黑 发表于 2022-8-8 19:17
挺好挺好
嗯嗯。没有你制作的那么漂亮。
加林森 发表于 2022-8-8 20:06
嗯嗯。没有你制作的那么漂亮。
主要是图片问题，你要跟小辣椒学学如何选图
马黑黑 发表于 2022-8-8 20:28
主要是图片问题，你要跟小辣椒学学如何选图
嗯嗯。她告诉我了的。
加林森 发表于 2022-8-8 20:57
嗯嗯。她告诉我了的。
这就好
马黑黑 发表于 2022-8-8 12:32
canvas画布貌似不太难，虽然内容也很多、基本功的掌握是需要点时间的。
记得刚学的时候，理解了那个滚动的小球是被不断画出来的，当时还觉得很神奇{:4_187:}
马黑黑 发表于 2022-8-8 12:39
页面打开的时候，小球是随机分布，然后按各自设定好的速度上移，移出后改变存储小球的数组数据，主要是位 ...
嗯，看完24楼的，能明白点了，随机的位置的小球，在上升一个距离后，再随机改变。{:4_204:}
马黑黑 发表于 2022-8-8 12:54
先说小球半径。对象 dotAr (key是数组下标内任意数）有三个属性，它们已经在创建函数的时候赋值，后 ...
这个解说真详细，明白了，谢谢黑黑{:4_187:}
马黑黑 发表于 2022-8-8 21:50
这就好
是啊。
红影 发表于 2022-8-8 22:38
这个解说真详细，明白了，谢谢黑黑
理解了就好