微信小程序圆形进度条倒计时效果

最新推荐文章于 2023-09-14 22:29:01 发布

一天一天积累

最新推荐文章于 2023-09-14 22:29:01 发布

阅读量6.3k

点赞数 1

分类专栏：小程序文章标签：微信小程序进度条圆环倒计时

本文链接：https://blog.csdn.net/u012011360/article/details/79346469

版权

本文介绍如何在微信小程序中通过canvas封装圆环进度条，并实现倒计时功能，展示了具体步骤和最终效果。

摘要由CSDN通过智能技术生成

效果如下图：

 
  var initNum 
  = 
  7 
  ; 
  //倒计时数 
 
 
  var spaceNum 
  = 
  1000 
  ; 
  //文字倒计时间隔 
 
 
  var space 
  = 
  1000 
  ; 
  //环倒计时间隔 
 

一、封装canvas画圆环

   begin 
  : 
  - 
  ( 
  1 
  / 
  2 
  * Math 
  .PI 
  ), 
 

   pai2 
  : 
  2 
  * Math 
  .PI 
  , 
 
 
  //canvas画圆环 
 

   drawRang 
  : 
  function 
  (precent 
  ) 
  {
    
 
 
  var windowWidth 
  = wx 
  .getSystemInfoSync 
  ().windowWidth 
  ; 
 
 
  var poaitionX 
  = wx 
  .getSystemInfoSync 
  ().windowWidth 
  / 
  2 
  ; 
 
 
  
 