如何用简短几十行JS代码打造炫酷canvas交互效果？

本文共计1612个文字，预计阅读时间需要7分钟。

目录

1.绘制圆形

2.鼠标移动的圆形

3.鼠标拖动的粒子

4.颜色渐变的粒子

5.连接的粒子

总结结语不多说，先上图！本章节的示例代码均来自Franks在YouTube上发布的一个教学视频。

目录

• 1.画圆
• 2.鼠标移动的圆
• 3.鼠标拖动的粒子
• 4.颜色渐变的粒子
• 5.连接的粒子
• 总结

废话不多说，先上效果图！

本篇文章的示例代码都是抄的一个叫Franks的老外在yutube上的一个教学视频，他还出了很多关于canvas的视频，十分值得学习，而我对canvas也不太熟悉，跟着大神一起敲代码，做个学习笔记，还要说一下，本文示例的页面结构很简单(html只包含一个canvas)，后面代码部分就不贴了，毕竟js才是主角。