几十行js实现很炫的canvas交互特效

几十行js实现很炫的canvas交互特效

---

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

1.画圆

首先从画一个静态的圆开始吧，只需要了解很少的API即可，MDN上有详细的描述，这里就不过多介绍了，直接看js代码吧：

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = windo