美文网首页
canvas基础之 倒计时炫酷效果

canvas基础之 倒计时炫酷效果

作者: 萝卜仔1 | 来源:发表于2017-03-22 22:12 被阅读0次

整体思路

先定义一些常量 比如小球的半径 固定的坐标位置 颜色, 重点是一个2维数组用来记录数字的阵列

获取时间,在定时器执行绘制和更新的函数

绘制函数 需要获取当前的时间 ,所以定义一个专门用来获取当前时间的函数即可

在绘制函数中获取当前时间具体时 分 秒  在对应的阵列把数字画上去,通过双重for循环遍历拿到点阵数据

判断是否为一,为一就画一个圆,这样就可以显示具体的时间在点阵上

更新函数用来获取当前时间和下一次的时间 做一个判断 当两个时间不相等的时候 就添加小球

所以创建一个添加小球的方法  用一个数组把小球放进去 在绘制时间时候同时把小球也一同绘制,不同的是,彩色小球会运动

所以定义一个让小球运动的函数,里面进行运动的函数,并且判断何时清除小球,  

关键点,时间与点阵的如何绘制成对应的数字  何时需要添加小球 

相关文章

  • H5 新特性01

    Canvas 基础 canvas应用领域 游戏 可视化数据(图表) banner、炫酷效果 地图 ...

  • canvas基础

    Canvas 画布基础 canvas用途 游戏 小游戏 图表 报表 如 Charts插件 炫酷效果 banner...

  • canvas基础之 倒计时炫酷效果

    整体思路 先定义一些常量 比如小球的半径 固定的坐标位置 颜色, 重点是一个2维数组用来记录数字的阵列 获取时间,...

  • HTML5新增API

    Canvas 画布 canvas用途 游戏 小游戏 图表 报表 如 Charts插件 炫酷效果 banner 模...

  • canvas简单入门(1)

    Canvas 画布 canvas用途 游戏 小游戏 图表 报表 如 Charts插件 炫酷效果 banner 模...

  • canvas的简单使用

    Canvas 画布 canvas用途 游戏 小游戏 图表 报表 如 Charts插件 炫酷效果 banner 模...

  • 绚丽的倒计时效果(Canvas)

    1. 案例介绍 最近在慕课网上看了一门有关Canvas的课程案例,炫丽的倒计时效果Canvas绘图与动画基础,学习...

  • 【Canvas 03】 Canvas时钟效果

    在前一篇文章中,我已经写了canvas如何制作一个百行代码Canvas酷炫倒计时 下面由此衍生出canvas动画时...

  • HTML5 canvas画布

    canvas用途 游戏 小游戏 图表 报表 如 Charts插件 炫酷效果 banner 模拟器、图形编辑器 等...

  • canvas学习一

    最近发现canvas可以实现好多酷炫的效果,因为对canvas一知半解,平时好像用到的场景也不多,现在准备系统的学...

网友评论

      本文标题:canvas基础之 倒计时炫酷效果

      本文链接:https://www.haomeiwen.com/subject/yhuanttx.html