您现在的位置是：网站首页> 编程资料编程资料

ES6与canvas实现鼠标小球跟随效果html5 canvas实现的鼠标响应式树叶光标跟随动画特效源码html5 canvas实现跟随鼠标移动的黑洞动画特效源码html5 canvas实现的点击跟随鼠标移动光线动画特效源码html5 canvas实现的跟随鼠标光标动画特效源码html5 canvas实现的跟随鼠标刮风下雨动画特效源码html5 canvas实现跟随鼠标旋转的箭头html5 canvas纸飞机跟随鼠标飞行特效源码

2023-10-20 282人已围观

简介这篇文章主要介绍了ES6与canvas实现鼠标小球跟随效果的相关资料,需要的朋友可以参考下

最近闲来无聊，看了下ES6的语法，结合canvas实现了动画特效——随着鼠标的移动，会有小球跟随且自动消失的动画。

首先，html部分，目前就一个canvas标签。

其次，css部分，没有考虑美观，大家喜欢的话，可以自己添加样式

最后，看下js实现部分

稍作解释下我的设计思路：

首先，获取canvas对象，获取上下文，设置一些基本的属性。（canvas不做过多描述，具体的可以去w3自己研究）。然后，先定义一个Ball的类，里面有小球的圆心坐标位置，以及半径和颜色。在定义一个画小球的方法，具体的画圆实现，不懂的可以去canvas文档自己去看。

在定义一个会变的小球类并继承Ball类。里面会有更新小球状态的方法，用来改变小球的半径以及颜色属相。

最后，开启一个定时器，当鼠标移动时，把生成的小球存储到数组中，然后遍历循环读取小球，并改变小球的样式，达到最终的效果。

最后附上完整代码。直接拷贝浏览器运行。

会动的小球

总结

以上所述是小编给大家介绍的ES6与canvas实现鼠标小球跟随鼠标效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！