掌财社:前端接口怎么实现canvas动态图形效果?方法详情！

我们在通过上个文章中的分享我们知道大概有关于如何利用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。想要学习前端的小伙伴可以加入我们一起学习，互相帮助。群里每天晚上都有大神免费直播上课，如果不是想学习的小伙伴就不要加啦。

如何改变元素的状态？

一个圆的位置是由圆心的坐标决定的，那么我们在每次绘制canvas的时候就改变一次元素的位置即可：

vary=100;//给一个初始的圆心位置，接下来每次绘制的时候圆心的y位置都往下移动一个距离
setInterval(function(){
canCon.fillStyle="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.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)

但此时还是没有效果，那么到底是什么情况呢？我们可以回想一下我们小时候画画的场景，我们在擦除画纸上某一区域的时候是不是需要首先把画笔抬起来，这样的话我们才能用橡皮擦擦掉纸上的某些区域，所以我们在擦除canvas的某个区域之前先要把笔给抬起来才行。

vary=100;//给一个初始的圆心位置，接下来每次绘制的时候圆心的y位置都往下移动一个距离
setInterval(function(){
canCon.beginPath();//把笔抬起来
canCon.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)

这样我们就能得到一个运动的圆了

总结

掌财社:前端接口怎么实现canvas动态图形效果?方法详情！相关推荐

掌财社:原材料涨价有多猛?上游一天一价中下游艰难抉择
"所有板材的报价,仅限于当日当时确认并付款,没有付款的一律作废重报." "最近都忙着一个事--谈判,和各式的供应商谈判." "去年就提了要涨,但一直压 ...
掌财社:Springboot如何添加支付接口？实例过程详解
在Springboot项目中,总是需要与支付宝.微信等等对接支付接口,那么问题来了,在Springboot中该如何实现支付接口对接呢?下面文章将以支付宝为例,演示一下Springboot对接支付接口的 ...
掌财社:怎么解决Canvas绘图出现模糊问题？在高清屏解决方法解析！
我们在使用高清屏进行工作或者娱乐的时候都会看起来比较舒适,那么大家知道吗?屏幕的一个物理像素就是css所定义的一个逻辑像素.所以下面我们来介绍有关于"怎么解决Canvas绘图出现模糊问题?& ...
掌财社:B站应该尽快停止毫无意义的对外投资
在最近三个交易日,B站股价已经下跌约30%.主要原因有两个:第一是三季报亏损额度加大,而且对四季度的营收指引较低:第二是在公布财报的第二天,就急匆匆地推出了14亿美元(还有可能扩大为16亿美元)的可转 ...
掌财社寒山:垄断阴影未除，失去左晖的贝壳还能走多远？
5月19日贝壳公布了2021年一季度财报. 财报显示,截至3月31日,贝壳的营业收入为207亿元,同比增长190.7%,净利润10.59亿元,调整后净利润为15.02亿元.在住房交易上,贝壳一季度总交 ...
掌财社:千亿市值“插座茅”被反垄断调查！高瓴、社保基金踩雷公司火线回应
反垄断并不只是在互联网领域. 5月12日晚,公牛集团发布公告称,浙江省市场监管局决定对公司涉嫌与交易相对人达成并实施垄断协议行为进行立案调查.对此,公牛集团回应称,将根据相关法律规定,积极配合反垄断案 ...
掌财社:对于html5新增与废弃标签的详细说明！
在技术的不断迭代和更替中会逐渐的淘汰比较不好的一下属性和标签,那么今天我们就来一同探讨有关于"对于html5新增与废弃标签的详细说明! "这方面的相关内容分享吧! 一.废弃的标签 ...
掌财社:顺丰也搞房地产？！顺丰房托冲刺港股IPO 值得申购吗
作者:21金融圈IPO股探社探长图片:招股书前情回顾:整一个四月份,港股市场只上市了三家IPO公司,其中有一家破发--兆科眼科,另外两家小涨.5月,港股市场迎来第一只新股,顺丰房托5月5日正式开启 ...
掌财社:python怎么爬取链家二手房的数据？爬虫实战！
我们知道爬虫的比较常见的应用都是应用在数据分析上,爬虫作为数据分析的前驱,它负责数据的收集.今天我们以python爬取链家二手房数据为例来进行一个python爬虫实战.(内附python爬虫源代码) ...

掌财社:前端接口怎么实现canvas动态图形效果?方法详情！

掌财社:前端接口怎么实现canvas动态图形效果?方法详情！相关推荐

最新文章

热门文章