canvas实现动画效果,h5 canvas生成图片

　　在上一篇文章中，我们分享了如何使用canvas绘制图形，但是所有的图形都是静态的。本周，我们将学习如何使用画布绘制动态图形。

　　什么是动画？

　　我们在画动画之前，一定要知道什么是动画，一部动画至少需要哪些基本条件？

　　我们可以用一个工具来展示什么是动画。

　　这是PPT绘制的动画效果。

　　根据上面PPT画出的一个动画效果，我们可以看到，当几个PPT页面快速切换时，我们看到的是一个动画效果。

　　这是动画实现的基本元素：

　　单位时间内连续播放多张图片。这个单位时间通常以秒为单位。为了在计算机渲染的图形中获得流畅的视频，每秒的图片数量必须大于或等于显示器的刷新频率(该刷新频率一般为60hz)。

　　状态(大小、形状、颜色、位置、角度等。)的对象必须被改变。

　　那么我们如何在canvas中实现这两个条件呢？

　　如何在1s内绘制60张图形

　　我们可以把这句话改成每1/60秒画一个图。在JavaScript中，为了每隔一段时间做一件事，我们使用计时器setinterval。

　　什么是定时器？

　　Setinerval(function f(){}，t)，定时器可以传入两个参数，一个是函数，一个是时间。这段代码意味着函数f每t毫秒执行一次

　　然后我们就用这个来实现我们需要的每1/60s画一个图。

　　setInterval(function(){ cancon . fill style= 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。想学前端的小伙伴可以加入我们一起学习，互相帮助。每天晚上群里都有大神的免费直播课。如果不是想学的小伙伴，就不要加了。

　　(537-631-707)

　　如何改变一个元素的状态？

　　圆的位置是由圆心的坐标决定的，所以我们可以在每次画canvas的时候改变一次元素的位置。

　　vary=100//给一个圆心的初始位置，然后每画一次，圆心的Y位置下移一个距离setInterval(function(){ cancon . fill style= black ；//canCon.fill的意思是拿起一支笔，在这张宣纸上画出一个立体的图形。//style=black 的意思是用黑色墨水蘸一下。//一起看的话，意思是拿起画立体图形的笔，粘上黑色墨水cancon.arc (233，y，66，0，math . pi * 2)；//构思在宣纸上画一个圆(圆心的x位置，y位置，圆的半径，圆的起点和终点)；cancon . fill()；//写字画画}，1000/60)

　　这时候我们看到的不是一个移动的圆圈，更像是一个延伸的进度条。其实原因很简单。每次我们画一个新的图形，我们并没有抹去原来的图形。这样的图是N个图叠加的结果。所以每次我们画一张新的图，都要把原来的擦掉。那么我们该怎么做呢？

　　vary=100//给一个圆心的初始位置，然后每画一次，圆心的Y位置下移一个距离setInterval(function(){ cancon . clear rect(0，0，500，500)；//擦除矩形区域矩形的左上角坐标以及矩形的宽度和高度canCon.fillStyle= black//canCon.fill的意思是拿起一支笔，在这张宣纸上画出一个立体的图形。//style=black 的意思是用黑色墨水蘸一下。//一起看的话，意思是拿起画立体图形的笔，粘上黑色墨水cancon.arc (233，y，66，0，math . pi * 2)；//构思在宣纸上画一个圆(圆心的x位置，y位置，圆的半径，圆的起点和终点)；cancon . fill()；//写一幅画}，1000/60)但是此时仍然没有效果，那么是什么情况呢？我们可以回想一下小时候画画的场景。我们在画纸上擦除某个区域的时候，是不是需要先提起画笔，这样才能用橡皮擦擦除纸上的某些区域，所以在擦除画布的某个区域之前，我们得提起笔。

　　vary=100//给一个圆心的初始位置，然后每画一次，圆心的Y位置下移一个距离setInterval(function(){ cancon . begin path()；//提起笔can con.clearrect (0，0，500，500)；//擦除矩形区域矩形的左上角坐标以及矩形的宽度和高度canCon.fillStyle= black//canCon.fill的意思是拿起一支笔，在这张宣纸上画出一个立体的图形。//style=black 的意思是用黑色墨水蘸一下。//一起看的话，意思是拿起画立体图形的笔，粘上黑色墨水cancon.arc (233，y，66，0，math . pi * 2)；//构思在宣纸上画一个圆(圆心的x位置，y位置，圆的半径，圆的起点和终点)；cancon . fill()；//写写画画}，1000/60)这样我们就可以得到一个移动的圆。

　　总结

　　以上是边肖推出的H5最强界面canvas，实现了动态图形功能。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。