上个文章中我们分享了如何利用canvas来进行图形绘制，但是绘制的都是静态图形，本周我们就来学习如何利用canvas进行动态图形绘制。
什么是动画？
我们在绘制动画之前必须要弄清楚什么是动画，一个动画最起码需要哪些基本条件呢？
我们可以用一个工具展示动画是什么？
这是利用PPT绘制出的一个动画效果
根据以上PPT绘制出的一个动画效果我们可以看到，快速在几张PPT页面进行切换时连起来看到的就是一个动画效果。
这就是动画实现的基本要素：
单位时间内连续播放多张图片。这个单位时间一般以秒为单位，在计算机渲染的图形中要想获得一个足够流畅的视频，每秒钟内的图片数量必须要大于等于显示器的刷新频率（这个刷新频率一般为60hz）
每图片内的物体状态（大小，形状，颜色，位置，角度等等）必须要发生改变
那么我们在canvas中如何实现这两个条件呢？
如何在1s内绘制60张图形
我们可以把这话变形一下，就变成每隔1/60s就绘制一张图形。在JavaScript中要想实现每隔一段时间做一件事情，我们使用的方法是用定时器setinterval。
什么是定时器？
setinerval（function f(){}，t），定时器内部可以传入两个参数，一个是函数，一个是时间，这个代码的意思就是每隔t ms就执行一次函数f。那么我们就用这个来实现我们所需要的每隔1/60s绘制一张图形
setInterval(function(){
canCon.fillStyle="black";
//canCon.fill的意思在这张宣纸上拿起一只画实心图形的笔，
//style="black"的意思就是蘸上一个黑色墨
//连起来看的话就是拿起一只画实心图形的笔并粘上有黑色的墨水
canCon.arc(233,233,66,0,Math.PI*2);
//在宣纸上构思画一个圆（圆心的X位置，Y位置，圆的半径，从什么位置开始画圆，画到哪里结束）；
canCon.fill();//下笔作画
},1000/60)最终效果
但是现在还没有一个动画效果，因为1s内绘制的60张图形都是一模一样的，所以接下来就要在每一张图形绘制的时候改变元素的状态。
顺便给大家推荐一个裙，它的前面是 537，中间是631，最后就是 707。想要学习前端的小伙伴可以加入我们一起学习，互相帮助。群里每天晚上都有大神免费直播上课，如果不是想学习的小伙伴就不要加啦。
