繁华梦

马黑黑

加林森 发表于 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 08:58
dotAr[key].y -= (7 - dotAr[key].r) / 10;

这个数据为什么这样取？

先说小球半径。对象 dotAr[key] (key是数组下标内任意数）有三个属性，它们已经在创建函数的时候赋值，后面又通过 update 函数在小球移出顶线后随机或不随机赋值（重新安置时的Y坐标不随机，在底线）：

dotAr[key].x - X坐标
dotAr[key].y - Y坐标
dotAr[key].r - 半径

再说珠子大小。半径决定其大小，半径计算中，工具函数 Math.random() * 5 将得到 0 - 5 之间的浮点数（会有0，所以本帖不够严谨，严谨的话应再加上一个数，如加1什么的）。

至于珠子上升的依据，就是你说的这句，

    dotAr[key].y -= (7 - dotAr[key].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
这叫刷屏吧，以前的画外音之类的变迁

弄得俺找不到回家路了

樵歌

马黑黑 发表于 2022-8-8 12:31
我在文本特效那里有类似的代码

木明白

马黑黑

樵歌 发表于 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画布貌似不太难，虽然内容也很多、基本功的掌握是需要点时间的。

记得刚学的时候，理解了那个滚动的小球是被不断画出来的，当时还觉得很神奇

红影

马黑黑 发表于 2022-8-8 12:39
页面打开的时候，小球是随机分布，然后按各自设定好的速度上移，移出后改变存储小球的数组数据，主要是位 ...

嗯，看完24楼的，能明白点了，随机的位置的小球，在上升一个距离后，再随机改变。

红影

马黑黑 发表于 2022-8-8 12:54
先说小球半径。对象 dotAr[key] (key是数组下标内任意数）有三个属性，它们已经在创建函数的时候赋值，后 ...

这个解说真详细，明白了，谢谢黑黑

加林森

马黑黑 发表于 2022-8-8 21:50
这就好

是啊。

马黑黑

红影 发表于 2022-8-8 22:38
这个解说真详细，明白了，谢谢黑黑

理解了就好