微信小程序实现美美的虚线圆形进度圈

最新推荐文章于 2024-06-12 20:30:00 发布
最新推荐文章于 2024-06-12 20:30:00 发布
阅读量2k 收藏 3
点赞数
分类专栏： 小程序 文章标签： 微信 绿色
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li3007liuu/article/details/76017661
版权

先上效果图：
这里写图片描述
实现过程采用3层绘图，底层为灰色圆圈，中层为前景带进度设置的绿色圆圈，顶层为100条白色线条，将圆圈分成虚线进度条。这样实现的进度圈，可以在单个进度圈内部进行细分呈现更细致的进度；
下面为wxml中代码

    <canvas class="cir" style="width:212px; height:212px;" canvas-id="canvasArc">
    </canvas>

下面为wxss样式代码

最低0.47元/天 解锁文章
萧玉竹
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序进度条样式_详解微信小程序——自定义圆形进度条
weixin_33439618的博客
02-05 1194
微信小程序 自定义圆形进度条，具体如下：无图无真相，先上图：实现思路，先绘制底层的灰色圆圈背景，再绘制上层的蓝色进度条。代码实现：JS代码：页面初始化 options为页面跳转所带来的参数},onReady: function () {// 页面渲染完成var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。c...
DashedCircularProgress环形虚线进度条
04-29
DashedCircularProgress环形虚线进度条
线形进度条的几种实现方式
qq_40289557的博客
05-28 2260
在大屏可视化应用中，进度条可以直观地表现出某个指标的进度，进度条的展示形式又有很多种，例如环形进度条，线性进度条，本章节针对线形进度条的几种实现方案提供一下个人的见解及具体的实现方案（以vue为技术栈）
小程序 js+Canvas 绘制半圆环虚线进度条
最新发布
随风潜入夜，不白头
06-12 459
过程分为三步，第1步，先画虚线底部背景，第2步，画动态的虚线（已选虚线蓝颜色），第3步，画动态的外标（已选虚线外位置的标），相关联的有1和2、2和3，1和2比较明显，颜色背景位置相同，2覆盖在1上，2和3终点位置相同，也就是计算弧度是一样的。
纯CSS实现进度条加载效果或者loading样式
happy81997的博客
01-29 1195
纯CSS实现进度条加载效果或者loading样式。
微信小程序-canvas 2d带动画的半圆形刻度进度条
sunzhibin的博客
03-16 1745
效果图 实现思路 代码过多，但不复杂 采用Canvas 2D，文档请搜索h5 canvas 开发文档； 定义4个canvas，通过相对定位重叠在一起： <!-- 绘制背景半圆刻度 --> <canvas type="2d" id="bgLine" style="position:absolute;"></canvas> <!-- 绘制百分比刻度（带动画） --> <canvas type="2d" id="line" st
微信小程序圆形进度条倒计时效果
沫沫酱
02-22 6368
效果如下图：var initNum = 7; //倒计时数var spaceNum = 1000; //文字倒计时间隔var space =1000; //环倒计时间隔一、封装canvas画圆环 begin: - (1 / 2 * Math.PI), pai2: 2 * Math.PI, //canvas画圆环 drawRang: function (precent) { var w...
微信小程序源码 圆形菜单(学习版)
06-19
微信小程序源码 圆形菜单(学习版)微信小程序源码 圆形菜单(学习版)微信小程序源码 圆形菜单(学习版)微信小程序源码 圆形菜单(学习版)微信小程序源码 圆形菜单(学习版)微信小程序源码 圆形菜单(学习版)微信小程序源码...
微信小程序canvas实现椭圆（圆形）元素自由移动
01-09
本文将深入探讨如何使用Canvas在微信小程序中实现椭圆（圆形）元素的自由移动。 首先，我们需要了解Canvas的基本用法。在微信小程序中，Canvas组件通过`<canvas>`标签引入，并通过`wx.createSelectorQuery()`获取...
微信小程序之裁剪图片成圆形的实现代码
10-17
在微信小程序中，实现将用户上传的图片裁剪成圆形是一项常见的需求，特别是在涉及用户头像替换的场景。本文将详细介绍如何通过编程实现这一功能。 首先，我们需要了解微信小程序中的`movable-view`组件。这是一个可...
微信小程序流程进度样式实现 步骤
08-30
在微信小程序开发中，创建美观且实用的流程进度样式是一个重要的设计环节，它能帮助用户了解当前任务的完成状态和接下来的步骤。本教程将详细讲解如何在微信小程序中实现这样的功能。 首先，我们需要理解微信小程序...
QCustomplot 层 (七)
独旅天涯
09-09 1233
一、分层绘制 一直说要讲2.0.0版本，但总是想把1.3.2版本拿出来比较一下，这篇文章也不例外。QCustomPlot2.0.0beta版本比1.3.2release版本有一个很大的改进那就是分层绘制，所谓分层绘制就是把一张图分几张图来绘制，最后在把这分开的几张图统一绘制到一张图上，比如一张图A，需要分开成3张图B、C和D来绘制，当图A需要重新绘制时，我们一次判断B、C和D是否需要重新绘制，如果不需要绘制的我们直接把图贴到A上，那就很大的减少了重新绘制的时间，而这部分时间其实是没有必要花费的。 ...
微信小程序通过css实现底部边大圆弧效果
wjm0519的博客
05-22 2998
1.场景 需在个人中心添加下边框为圆弧 2.在wxml中定义一个class节点 <view> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickna
用css画一个半圆弧（以小程序为例）
qq_52181663的博客
09-28 3801
2、两个参数时，第一个参数代表：左上、右下（主对角线） ，第二个参数代 表：右上、左下（副对角线）3、四个参数时、第一个参数代表：左上 ，第二个参数代表：右上，第三个代表：右下，第四个参数代表左下。3、三个参数时、第一个参数代表：左上 ，第二个参数代表：右上、左下，第三个代表：右下。二、css样式：原理是两个半圆叠在一起，就是一个半圆弧。那么，如何画一个半圆。圆弧的html结构是 两个块级元素嵌套。1、一个参数时，代表四个角都是这个值。
微信小程序进度条样式_微信小程序实现时间进度条功能
weixin_34198817的博客
01-12 996
关于答题类，或者一些游戏环节的小程序需要用到时间进度条，该功能怎么实现？看下面源码{{progressTime}}秒{{playPausetips}}CSS:.out {margin-left:auto;margin-right:auto;width:250px;height:20px;border:1px solid red;border-radius:20px;overflow:hidden;...
微信小程序：实时圆形进度条实现
第九程序官方博客
04-14 6444
微信小程序：实时圆形进度条实现开发文档。
微信小程序之圆形进度条
weixin_34292402的博客
02-08 1189
需求概要 小程序中使用圆形倒计时，效果图： 思路 使用2个canvas 一个是背景圆环，一个是彩色圆环。 使用setInterval 让彩色圆环逐步绘制。 解决方案 第一步先写结构 一个盒子包裹2个canvas以及文字盒子；盒子使用相对定位作为父级，flex布局，设置居中；一个canvas，使用绝对定位作为背景，canvas-id="...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值