微信小程序 canvas画半圆（弧形）进度条

最新推荐文章于 2024-08-19 13:13:12 发布

Archer_yy

最新推荐文章于 2024-08-19 13:13:12 发布

阅读量4.5k

点赞数 1

本文链接：https://blog.csdn.net/Dilemma_me/article/details/103614023

版权

在这里插入图片描述

wxml：

<view class="progress">
        <canvas canvas-id="canvasProgress" style="width: {
  {canvasWidth}}rpx; height: {
  {canvasHeitht}}rpx;"></canvas>
      </view>
      <view class="progress">
        <canvas canvas-id="canvasProgressReal" style="width: {
  {canvasWidth}}rpx; height: {
  {canvasHeitht}}rpx;"></canvas>
      </view>

js：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    canvasWidth: 500,
    canvasHeitht: 300,
    radioPos: 98,
    footNum: 0,
    footNumAll: 6000,
    myTargetFoot: 10000,
    degree: 195,
    timer: '',
    timerNum: '',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(opti