Loading
0

Canvas实现鼠标划过出现彩色气泡

思路

鼠标移动时,触发生成小水泡(小水泡的半径,x轴,y轴速度,颜色透明度随机,打包成一个对象放入数组)。然后就是for循环数组开始在canvas里绘制水球,在通过定时器让它运动(运动的方向是x,y速度比来控制的)。这里当时被一个问题难住了:就是每个小球颜色随机,在气泡上升过程中让他颜色不变,透明度逐渐变小,后来干脆用个自定义属性方法了。还有就是为了模拟真实水压作用,让越底部生成的水泡上升速度越快。那么整体的动画效果还是后期慢慢调整定时器速率和水泡x,y速度来实现均衡的。大概就是这样了。

预览

canvas

展示地址

点我进入

缺陷

没有兼容各类浏览器,并且气泡运动时好像有闪烁和抖动。

声明:本文为原创,作者为 刘国栋,转载时请保留本声明及附带文章链接:http://www.liuguodong.net/397.html

最后编辑于:2016/11/17作者: 刘国栋

刘国栋

刘国栋个人博客,是记录博主学习和成长的个人博客网站,关注于web前端和WordPress经验与技巧方面的学习和分享,也会分享一些优秀的个人博客模版。

3 条回应

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???

  1. 马超金博客说道:
    1#

    就是过来看看 :!:

    • 刘国栋 刘国栋说道:

      欢迎常来~回访的时候用chrome电脑管家报毒了,用别的浏览器没事。给你邮箱发截图了

      • 马超金博客说道:

        多谢反馈,可能有些敏感的内容,所以报毒了,申诉了也不通过

扫一扫关注刘国栋个人博客

扫一扫关注刘国栋个人博客