博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
炫酷的时钟--canvas初体验
阅读量:4948 次
发布时间:2019-06-11

本文共 4003 字,大约阅读时间需要 13 分钟。

 

先啥也不说:来张效果图

我是根据:http://www.imooc.com/learn/133 这里的课程进行学习的。大大的感谢老师的深入浅出的讲解!!

我在这里仅仅提供我自己的代码和整体思路。

我的思路:

  1  我们需要创建一个名为Ball的构造函数,每一个小球都是该构造函数的实例。

    每个小球都有以下属性:

      x坐标,y坐标(本例中,以画布的左上角为原点),颜色,半径,x方向的速度,y方向的速度,y方向的重力加速度

    方法:

      更新自身属性。(就是根据自己的速度 加速度 判断出下一时刻自身的位置参数以及速度,并改变自身属性)

  2  我们需要构造一个函数,这个函数能将根据小球的属性将小球在画布上表现出来;

  3  我们需要构造一个定时器,每隔50ms(当然也不用非得是50ms)将画布上的当前小球清空,并重新生成小球并表现出来

  通过观察效果图,我们可以看到,效果图中的小球可以分为两类:

    第一类是表示(组成)时间的小球,这类小球生命周期只有定时器的运行间隔时间那么长。

    第二类是处于掉落状态的小球,这类小球的生命周期比第一类要长,当这类小球滚出了画布,他的生命周记就结束了。

  第二类小球需要储存在一个单独的数组中,我们需要一个函数,这个函数能判断小球是否离开了画布,并将离开画布的小球对象从数组中删除

 

digit =    [        [            [0,0,1,1,1,0,0],            [0,1,1,0,1,1,0],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [0,1,1,0,1,1,0],            [0,0,1,1,1,0,0]        ],//0        [            [0,0,0,1,1,0,0],            [0,1,1,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [1,1,1,1,1,1,1]        ],//1        [            [0,1,1,1,1,1,0],            [1,1,0,0,0,1,1],            [0,0,0,0,0,1,1],            [0,0,0,0,1,1,0],            [0,0,0,1,1,0,0],            [0,0,1,1,0,0,0],            [0,1,1,0,0,0,0],            [1,1,0,0,0,0,0],            [1,1,0,0,0,1,1],            [1,1,1,1,1,1,1]        ],//2        [            [1,1,1,1,1,1,1],            [0,0,0,0,0,1,1],            [0,0,0,0,1,1,0],            [0,0,0,1,1,0,0],            [0,0,1,1,1,0,0],            [0,0,0,0,1,1,0],            [0,0,0,0,0,1,1],            [0,0,0,0,0,1,1],            [1,1,0,0,0,1,1],            [0,1,1,1,1,1,0]        ],//3        [            [0,0,0,0,1,1,0],            [0,0,0,1,1,1,0],            [0,0,1,1,1,1,0],            [0,1,1,0,1,1,0],            [1,1,0,0,1,1,0],            [1,1,1,1,1,1,1],            [0,0,0,0,1,1,0],            [0,0,0,0,1,1,0],            [0,0,0,0,1,1,0],            [0,0,0,1,1,1,1]        ],//4        [            [1,1,1,1,1,1,1],            [1,1,0,0,0,0,0],            [1,1,0,0,0,0,0],            [1,1,1,1,1,1,0],            [0,0,0,0,0,1,1],            [0,0,0,0,0,1,1],            [0,0,0,0,0,1,1],            [0,0,0,0,0,1,1],            [1,1,0,0,0,1,1],            [0,1,1,1,1,1,0]        ],//5        [            [0,0,0,0,1,1,0],            [0,0,1,1,0,0,0],            [0,1,1,0,0,0,0],            [1,1,0,0,0,0,0],            [1,1,0,1,1,1,0],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [0,1,1,1,1,1,0]        ],//6        [            [1,1,1,1,1,1,1],            [1,1,0,0,0,1,1],            [0,0,0,0,1,1,0],            [0,0,0,0,1,1,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,1,1,0,0,0],            [0,0,1,1,0,0,0],            [0,0,1,1,0,0,0],            [0,0,1,1,0,0,0]        ],//7        [            [0,1,1,1,1,1,0],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [0,1,1,1,1,1,0],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [0,1,1,1,1,1,0]        ],//8        [            [0,1,1,1,1,1,0],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [0,1,1,1,0,1,1],            [0,0,0,0,0,1,1],            [0,0,0,0,0,1,1],            [0,0,0,0,1,1,0],            [0,0,0,1,1,0,0],            [0,1,1,0,0,0,0]        ],//9        [            [0,0,0,0],            [0,0,0,0],            [0,1,1,0],            [0,1,1,0],            [0,0,0,0],            [0,0,0,0],            [0,1,1,0],            [0,1,1,0],            [0,0,0,0],            [0,0,0,0]        ]//:    ];
digit.js文件
1   2   3   4     
5 Title 6 7 18 19 20
21 22 224 225

 

转载于:https://www.cnblogs.com/MnCu8261/p/6016919.html

你可能感兴趣的文章
性能测试插件
查看>>
全站缓存时代
查看>>
http://javafound.iteye.com/blog/704141 微博是这样练成的
查看>>
[MPI学习笔记]mpi并行实现方法
查看>>
c++ builder 获取命令行参数
查看>>
Win7系统重启后ip丢失问题问题的解决方法
查看>>
等保2.0所需设备
查看>>
jquery easyui-linkButton获取和设置按钮text并且解决火狐不支持innerText的方法
查看>>
IBM大型主机(Mainframe)技术简介之六——数据库和系统集成(二)
查看>>
【BZOJ5336】[TJOI2018]party(动态规划)
查看>>
【BZOJ4944】[NOI2017]泳池(线性常系数齐次递推,动态规划)
查看>>
我只为一瓶啤酒
查看>>
timestamp与timedelta,管理信息系统概念与基础
查看>>
linux 服务器时间同步
查看>>
蓝桥杯 历届试题 幸运数
查看>>
SQL游标(cursor)详细说明及内部循环使用示例
查看>>
[转]【HTTP】Fiddler(二) - 使用Fiddler做抓包分析
查看>>
[转]C#使用 Salt + Hash 来为密码加密
查看>>
Tornado入门
查看>>
9. 回文数
查看>>