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


Posted in HTML / CSS onMay 31, 2019

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

什么是动画?

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

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

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

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

根据以上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)

最终效果

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

但是现在还没有一个动画效果,因为1s内绘制的60张图形都是一模一样的,所以接下来就要在每一张图形绘制的时候改变元素的状态。

顺便给大家推荐一个裙,它的前面是 537,中间是631,最后就是 707。想要学习前端的小伙伴可以加入我们一起学习,互相帮助。群里每天晚上都有大神免费直播上课,如果不是想学习的小伙伴就不要加啦。

(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)

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

此时我们看到的不是一个运动的圆,更像是一个不断延伸的进度条。原因其实很简单,咱们在每次绘制一个新的图形的时候没有把原来的图形给擦出掉了,这样的画面就是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)

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

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

总结

以上所述是小编给大家介绍的H5最强接口之canvas实现动态图形功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
 

HTML / CSS 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 #HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 #HTML / CSS
Html5 滚动穿透的方法
May 13 #HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 #HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 #HTML / CSS
基于Html5实现的语音搜索功能
May 13 #HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 #HTML / CSS
You might like
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
详解Python中break语句的用法
2015/05/14 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
Python 含参构造函数实例详解
2017/05/25 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
详解Python 函数如何重载?
2019/04/23 Python
python——全排列数的生成方式
2020/02/26 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
最新会计专业求职信范文
2014/01/28 职场文书
见习期自我鉴定
2014/01/31 职场文书
致400米运动员广播稿
2014/02/07 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
mysq启动失败问题及场景分析
2021/07/15 MySQL
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技