【canvas】天不下雨,天下球

原创 老姚 随笔 思路 2430阅读 2018-03-08 13:43:51 举报

最近发现 codepen 上一个 canvas 大神 Gerard Ferrandez
看了他的所有作品,发现这是一个艺技兼备的大师。
研究其效果源码能学到不少东西。
今天改写他的一个 canvas 效果,并逐步给出实现思路。

1.如何实现小球自由落体?

使用 canvas 绘图环境的 arc 方法来画圆,
使用 requestAnimationFrame 来实现动画。
因为是自由落体,因此垂直速度是越来越快的。

2.一堆小球?

当然,我们可以 new 多个 Ball
这里修改了小球出生水平位置,使他们不会完全遮挡彼此。
当小球掉出窗口之外,我们再修改其位置,从而循环利用。

3.跟随鼠标移动的大白球?

画个白球倒很容易。实现移动只要捕捉鼠标位置,
并以此使用 requestAnimationFrame 更新白球位置即可。

4.如何判断碰撞?

关于碰撞检测,《HTML5 Canvas核心技术图形动画与游戏开发》一书第8章讲解了几个方法。
俩圆碰撞相对来说比较简单。示意图如下:

5.小球如何弹出去?

碰撞之后,小球要弹出去。
之前的弹出去的速度是写死的,因此效果不太好。
大神的实现是根据俩球挤进去的距离来设置弹出速度的。
这样比较符合现实,俩球压得越紧,弹出速度越大。

最后贴上大神的实现:传送门

本文完。

评论 ( 19 )
最新评论
老姚 18F 2018-03-15 09:46:48 19F

点赞👍的下面,灰色小♥

涵涵涵灬 2018-03-14 21:25:02 18F

找半天都没找到收藏在哪。。。。。。

老姚 16F 2018-03-13 10:08:43 17F
heardwang 2018-03-13 09:55:03 16F

不错,顶一个,虽然不会用canvas。

rocky191 2018-03-13 09:36:48 15F

这个666

老姚 13F 2018-03-10 10:13:21 14F

哈哈,显示数据!

aaawhz 2018-03-10 10:11:49 13F

老姚可以做前端图表, 跟人工智能有些联系.

老姚 9F 2018-03-09 19:07:08 12F

收藏弹窗有bug,已经反馈给前端网官方了

天凉好个秋 8F 2018-03-09 17:12:01 11F

QAQ

18672293959 2018-03-09 16:58:00 10F

不错不错,我觉得有必要,更新一下我之前写的一篇文章

1325009640 2018-03-09 10:40:28 9F

厉害了 小哥哥,网站更新了怎么收藏啊?

老姚 1F 2018-03-09 09:46:41 8F

已经修改了。

老姚 5F 2018-03-09 09:46:07 7F

谢谢支持

老姚 3F 2018-03-09 09:45:02 6F

很感谢,已经按你说的修改了。

18830159776 2018-03-09 09:32:39 5F

感谢老姚分享。

folat 3F 2018-03-08 20:37:47 4F

额,count++应该放在if语句里面

folat 2018-03-08 20:25:58 3F

那是因为这些小球基本上是同一时间创建的,没有先后顺序,后面没有碰撞的话就一直这样,参考大神hugeannex的上下班路上的那一幅静态广告

定义一些限制用的变量

把创建小球的for循环去掉,转而在render函数里面创建小球

老姚 1F 2018-03-08 15:17:52 2F

天凉好个秋 2018-03-08 15:09:07 1F

不动鼠标,那一坨坨的下来感觉.......