首页 > 作文

H5最强接口之canvas实现动态图形功能

更新时间:2023-04-03 03:26:58 阅读: 评论:0

上个文章中我们分享了如何利用canvas来进行图形绘制,但是绘制的都是静态图形,本周我们就来学习如何利用canvas进行动态图形绘制。

什么是动画?

我们在绘制动画之前必须要弄清楚什么是动画,一个动画最起码需要哪些基本条件呢?

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

这是利用ppt绘制出的一个动画效果

根据以上ppt绘制出的一个动画效果我们可以看到,快速在几张ppt页面进行切换时连起来看到的就是一个动画效果。

这就是动画实现的基本要素:

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

每图片内的物体状态(大小,形状,颜色,位置,角度等等)必须要发生改变

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

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

我们可以把这话变形一下,就变成每隔1/60s就绘制一张图形。在javascript中要想实现每隔一段时间做一件事情,我们使用的方法是用定时器tinterval。

什么是定时器?

tinerval(function f(){},t),定时器内部可以传入两个参数,一个是函数,一个是时间,这个代码的意思就是每隔t ms就执行一次函数f。

那么我们就用这个来实现我们所需要的每隔1/60s绘制一张图形

tinterval(functi数字意思on(){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。想要学习前端的小伙伴可以加入惊蛰的蛰是啥意思我们一起学习,互相帮助。群里每天晚上都有大神免费直播上课,如果不是想学习的小伙伴就不要加啦。

(537-631-707)感动人物

如何改变元素的状态?

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

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

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

总结

以上所述是www.887551.com给大家介绍的h5最强接口之canvas实现动态图形功能 ,希望对大家有所帮助

本文发布于:2023-04-03 03:26:57,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/a3f02ec2513721acd94660ccf040a941.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:H5最强接口之canvas实现动态图形功能.doc

本文 PDF 下载地址:H5最强接口之canvas实现动态图形功能.pdf

标签:图形   位置   圆心   一只
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图