利用 canvas 实现圆形进度条，实现倒计时效果

#实现圆环渐变倒计时效果

内容

1. 效果图
2. 需求分析
3. 实现技术
4. 实现过程
5. 全部源码

1. 效果图展示

随着时间的减少, 圆环的红黄色部分会慢慢的减少,圆环中的数字会变小,一直到0停止.

2. 需求分析

• 可以自定义倒计时结束的时间
• 圆环的颜色是渐变的
• 倒计时的动画在视觉上是流畅运行, 而不是一格一格的减少

3. 实现的技术

语言	框架
HTML5	无
CSS3	BootStrap SASS
JavaScript	无

4. 实现的过程

1. HTML 部分

主要用到的是 HTML5 中的画布元素 canvas, 一共4个 canvas 元素拍成一排, 每个元素都是高144px, 宽144px的正方形, 两个圆环中的两个小点部分可以使用伪元素 after 和 before 来实现

源码如下:

<div class="count-down">
 <div class="container">
   <div class="row">
     <div class="days col-lg-3 col-md-3 col-sm-3 col-xs-6">
       <div class="colck">
         <canvas id="days" width="144" height="144"></canvas>
       </div>
     </div>
     <div class="hours col-lg-3 col-md-3 col-sm-3 col-xs-6">
       <div class="colck">
         <canvas id="hours" width="144" height="144"></canvas>
       </div>
     </div>
     <div class="minutes col-lg-3 col-md-3 col-sm-3 col-xs-6">
       <div class="colck">
         <canvas id="minutes" width="144" height="144"></canvas>
       </div>
     </div>
     <div class="seconds col-lg-3 col-md-3 col-sm-3 col-xs-6">
       <div class="colck">
         <canvas id="seconds" width="144" height="144"></canvas>
       </div>
     </div>
   </div>
 </div>
</div>

用 BootStrap 提供的栅格布局快速的把 canvas 元素排成一排
为每个 cnavas 元素设置对应的 id, 方便用 JavaScript 获取到该元素.

2. SASS部分

css 的部分是用 Sass 来写的, Sass 是一个 css 的 扩展语言, html 文件中引用的是写好的 Sass 文件编译生成 css 文件.

源码如下

.count-down {
   
  width: 100%;

  .row {
   
    padding: 0 145px;
  }

  .col-lg-3 {
   
    padding: 0;
    position: relative;
    
    .colck {
   
      width: 144px;
      height: 144px;
      background-color: #fff;
      margin: 0 auto;
    }
  }

  .days, .hours, .minutes {
   
    &:after, &:before {
   
      content: "";
      display: block;
      width: 12px;
      height: 12px;
      background-color: #fff;
      position: absolute;
      right: -6px;
    }
    &:after {
   
      bottom: 45px;
    }
    &:before {
   
      top: 45px;
    } 
  }
}

控制圆环的运动主要靠 JavaScript 代码, 这里 sass 的作用是用来把把元素的位置排列好, 把两个圆环中间的点画出来,

因为背景色是黑色的
为了看的更加直观, 我先把包裹 canvas 的元素背景色设为白色,

此时的效果:

3. JavaScript部分

最终的运动效果靠 js 代码来实现:

1. 我们先来获取到这4个 canvas 元素

// 获取4个 canvas 元素
var days_canvas = document.getElementById('days');
var hours_canvas = document.getElementById('hours');
var minutes_canvas = document.getElementById('minutes');
var seconds_canvas = document.getElementById('seconds');

---

2. 为了可以自定义指定倒计时结束时间, 写一个设置结束时间的函数, 返回值为一个 Date 对象.

// 设置倒计时时间：年 月 日 小时 分钟 秒 毫秒
endTime = setEndTime(2020, 11, 30, 15, 0, 0);

// 设置到期时间
function setEndTime(year, month, day, hour, minute, millisecond) {
   
return new Date(year, month - 1, day, hour, minute, millisecond);
}

js 中创建 Date 对象的5种方式
new Date(“month dd,yyyy hh:mm:ss”);
new Date(“month dd,yyyy”);
new Date(yyyy,mth,dd,hh,mm,ss);
new Date(yyyy,mth,dd);
new Date(ms);

注意 Date 对象中的月份取值是 0 - 11, 0 就表示 1 月,
用变量 endTime 保存这个设置好的 Date 对象

---

3. 根据现在的时间和设置好的到期时间计算现在到到期时间还有多少秒,多少分钟, 多少小时, 多少天.

// 计算距离到期时间还剩下多少 days, hours, minutes
 function getLeftTimeObj() {
   
   var date = new Date();
   var millisecond = date.getTime()
   var end_millisecond = endTime.getTime();

   if (end_millisecond < millisecond) {
   
     return {
   
       days: 0,
       hours: 0,
       minutes: 0,
       seconds: 0
     }
   }

   // 距离结束时间的秒数
   var left_seconds = (( end_millisecond - millisecond ) / 1000);

   var seconds = (left_seconds % 60);
   var