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 相关文章推荐
CSS3画一个阴阳八卦图
Mar 09 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 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中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
JavaScript模拟push
2016/03/06 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
关于JS模块化的知识点分享
2019/10/16 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
Python telnet登陆功能实现代码
2020/04/16 Python
Python实现验证码识别
2020/06/15 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
医学生自我鉴定范文
2013/11/08 职场文书
生产部统计员岗位职责
2014/01/05 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
事业单位岗位说明书
2015/10/08 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
Golang 链表的学习和使用
2022/04/19 Golang