Canvas案例-炫酷的数字时钟

栏目: Html5 · 发布时间: 6年前

内容简介:本人第一次发帖,有什么不妥之处还望大家包涵(有什么想法或者意见都可以在评论区留言),好了废话不多说,看下我要介绍的东西。炫酷的数字时钟,使用canvas绘制,这个案例来源于B站一个视频,但是实现思路完全是自己摸索的,效果如下图

引言

本人第一次发帖,有什么不妥之处还望大家包涵(有什么想法或者意见都可以在评论区留言),好了废话不多说,看下我要介绍的东西。

案例介绍

炫酷的数字时钟,使用canvas绘制,这个案例来源于B站一个视频,但是实现思路完全是自己摸索的,效果如下图

Canvas案例-炫酷的数字时钟

知识点

案例涉及的东西不是特别多,我大致罗列下:

  • canvas的基本使用,绘制圆

  • 动画中的requestAnimationFrame与定时器

  • 按位运算与数组构建模型

  • 如何模拟物理效果(加速度,阻力,碰撞检测)

  • js面向对象OOP

要掌握的东西不多,但是其中的思路还是尤为重要的。

案例中的对象

此案例的对象有以下:

  • Ball 仅指页面中的小球,该对象包含了ball的所有运动和状态参数,如:位置、速度、颜色等

  • Tile 每一个数字块就是一个Tile实例,呈现一个数字0-9

  • Chunk 一个Chunk实例包涵两个Tile对象,呈现两位数字,

  • Sence 负责整个页面的,比如页面的刷新,页面显示的调试信息等

Canvas案例-炫酷的数字时钟

实现思路

案例其实就是普通的时钟逻辑 + 七段数显 + 小球的物理特性

感兴趣的可以自己做做,后期我会分段详细的介绍

参考

用Canvas绘制炫丽的倒计时效果

计划

  • Ball对象及如何模拟物理效果

  • Tile对象及如何构建数字块

  • Chunk,Scene及对象及整体的实现


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

游戏数据分析的艺术

游戏数据分析的艺术

于洋、余敏雄、吴娜、师胜柱 / 机械工业出版社 / 2015-7 / 79.00

《游戏数据分析的艺术》是中国游戏产业的开创性著作,具有里程碑意义,它首次系统讲解了如何对游戏行业的数据进行分析,在行业里竖起了一根标杆。作者是来自TalkingData等国内顶尖的数据分析机构和西山居这样的知名游戏公司的资深数据分析专家, 对游戏数据从不同的业务角度进行了诠释。本书详细剖析了游戏数据分析相关的指标、方法论、内容挖掘、数据挖掘、软件使用、游戏设计、运营策划、渠道推广、收入解读、用户分......一起来看看 《游戏数据分析的艺术》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具