微信小程序使用canvas画圆形倒计时动画

最新推荐文章于 2023-01-19 20:36:02 发布

xyl_hq

最新推荐文章于 2023-01-19 20:36:02 发布

阅读量1.3k

点赞数 1

分类专栏：接口文章标签：微信小程序 canvas 倒计时

本文链接：https://blog.csdn.net/xiaxia_Lin/article/details/96330032

版权

本文介绍如何在微信小程序中利用canvas绘制圆形倒计时动画，详细讲解了wxml、wxss和js页面的实现过程，参考了相关博客资源。

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

参考文档：https://www.cnblogs.com/quietxin/p/9418813.html
效果：
在这里插入图片描述
wxml页面

<view class="container">
     <view class='progress_box'>
        <canvas class="progress_bg"   canvas-id="canvasProgressbg">  </canvas> 
        <canvas class="progress_canvas" canvas-id="secondCanvas"></canvas>
    </view>
</view>

wxss页面

.progress_box{
  position: relative;
  width:84px;
  height: 84px;  
  display: flex;  
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 84px;
}
.progress_bg{
  position: absolute;
  width:84px;
  height: 84px; 
}
.progress_canvas{
  width:84px;
  height: 84px;