Canvas案例-炫酷的数字时钟

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

内容简介:本人第一次发帖,有什么不妥之处还望大家包涵(有什么想法或者意见都可以在评论区留言),好了废话不多说,看下我要介绍的东西。炫酷的数字时钟,使用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及对象及整体的实现


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

查看所有标签

猜你喜欢:

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

Thirty-three Miniatures

Thirty-three Miniatures

Jiří Matoušek / American Mathematical Socity / 2010-6-18 / USD 24.60

This volume contains a collection of clever mathematical applications of linear algebra, mainly in combinatorics, geometry, and algorithms. Each chapter covers a single main result with motivation and......一起来看看 《Thirty-three Miniatures》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具