小程序画圆圈，画圆形进度条

最新推荐文章于 2024-04-10 23:09:07 发布
最新推荐文章于 2024-04-10 23:09:07 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 小程序 文章标签： javascript vue.js css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ddengjiayao/article/details/103589858
版权
本文介绍如何在微信小程序中利用canvas组件和CSS3技术，实现动态的圆形进度条效果。通过结合JavaScript和Vue.js的特性，创建可交互的画布动画，详细阐述了绘制过程和关键代码实现。
摘要由CSDN通过智能技术生成

小程序用画布画圆形进度条

<template>
    <view class="skill">
        <view>综合得分</view>
        <view class="top">
            <view class="canvasBox">
                <canvas canvas-id="runCanvas" id="runCanvas" class="canvas-inner" style="width: 420rpx; height: 420rpx;"></canvas>
            </view>
            <view class="tc">技术级别：高级</view>
        </view>
    </view>
</template>
<script>
    import wepy from "@wepy/core"
    wepy.page({
   
        data: {
   
            percentage: 60, //百分比
            animTime: 1000, // 动画执行时间
        },
        async onLoad(options) {
   
            this.drawCircle();
        },
        methods: {
   
            // 绘制圆形进度条方法
            run(c, w, h) {
   
                let that 
最低0.47元/天 解锁文章
柚子Christy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序：实时圆形进度条实现
第九程序官方博客
04-14 6442
微信小程序：实时圆形进度条实现开发文档。
微信小程序 进度圆环 进度环
carbonzhao的专栏
04-18 1098
【代码】微信小程序 进度圆环 进度环。
微信小程序制作圆形进度条
最新发布
老D工作室
04-10 1129
选择一个目录建立一个文件夹，比如 mycircle 吧，另外把对应 page 的相关文件都建立出来，包括 js，json，wxml 和 wxcc。
小程序：自定义圆形进度条
wjswangjinsheng的博客
10-09 301
circle.wxss: page { width: 100%; height: 100%; background-color: #fff; } .circle-box { text-align: center; margin-top: 10vw; } .circle { position: absolute; left: 0; right: 0; ma...
微信小程序 环形进度条_微信小程序：圆形进度条1
weixin_35686326的博客
01-14 369
Canvas就是用来绘制图形的强强强大的标签，用它来绘制各种图案是很简单的事情。1.首先，我们需要在页面中加入canvas标签2.接下来，需要在js文件中绘制圆弧page({data:{},onload:function(){this.drawcircle(0.82);},/*** 绘制圆形进度条,在使用的时候只需指定所要达到的百分比*/drawcircle: function (percent)...
详解微信小程序——自定义圆形进度条
01-03
微信小程序 自定义圆形进度条，具体如下： 无图无真相，先上图： 实现思路，先绘制底层的灰色圆圈背景，再绘制上层的蓝色进度条。 代码实现： JS代码： Page({ data: {}, onLoad: function (options) { // ...
微信小程序实现实时圆形进度条的方法示例
12-29
最近工作中为了做一个录制按钮，研究了下小程序的实时圆形进度条实现，下面这篇文章就来给大家详细的介绍了实现的方法示例，废话不多说，先来看看效果图吧。 效果图如下 初始状态 点击中间按钮开始绘制 绘制过程 ...
易语言源码易语言圆形进度条源码.rar
03-31
"易语言圆形进度条源码"是指使用易语言编写的，显示圆形进度效果的程序源代码。这种源码通常用于创建GUI（图形用户界面）应用程序，以可视化地表示某个过程的完成程度，例如数据加载、计算进度等。 圆形进度条相比...
旋转的小圆圈汇聚成一个大圆圈进度条小动画ppt特效.zip
09-11
"旋转的小圆圈汇聚成一个大圆圈进度条小动画ppt特效.zip" 文件提供了一种独特且吸引人的 PowerPoint 模板，适用于演示文稿、产品介绍或者加载界面设计。这种动画效果巧妙地结合了“进度条”和“旋转的小圆圈”，为...
简单的进度条,圆形进度条（一）
grace的专栏
05-28 852
1.  ProgressActivityDemo.java public class ProgressActivityDemo extends AppCompatActivity {     private Button progressButton = null;     @Override     protected void onCreate(Bundle savedInstanceSta
微信小程序绘制圆形的画布时钟源码.rar
07-10
一个圆盘形的时钟，绘制圆形的时钟和指针等，具体的实现思路是：onLoad生命周期函数，监听页面加载，将全局变量Index保存在that中，里面函数调用，获取系统信息成功，将系统窗口的宽高赋给页面的宽高，onReady生命周期函数，监听页面初次渲染完成，对canvasAPP函数循环调用，创建并返回绘图上下文（获取画笔），每次清除画布，然后变化后的时间补上，绘制中心圆和外面大圆，绘制字体，字体上下居中，绘制时间，绘制表盘小格，指针运动函数代码： 　　var t = new Date();//获取当前时间 　　var h = t.getHours();//获取小时 　　h = h>12?(h-12):h;//将24小时制转化为12小时制 　　var m = t.getMinutes();//获取分针 　　var s = t.getSeconds();//获取秒针 　　context.save();//再次保存2 　　context.setLineWidth(7); 　　//旋转角度=30度*（h m/60 s/3600） 　　//分针旋转角度=6度*（m s/60） 　　//秒针旋转角度=6度*s 　　调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为，页面卸载，清除画布绘制计时器。
微信小程序canvas绘制圆形图片
CherryCola_zjl的博客
11-06 1万+
canvas基础知识补齐一下，明白了原理便很简单。 先使用.arc绘制一个圆圈，通过.clip裁剪，绘制在圆圈内的内容会出现，其他的都会隐藏。 .drawImage的绘制位置是相对原画布，而不是圆圈，这个不知道的画很坑啊。只要绘制图片的位置再圆圈内便会出现。 //保存上文 targetCtx.save() targetCtx.beginPath() targetCtx.arc(110, 60,...
微信小程序canvas把正方形图片绘制成圆形
热门推荐
qq_37942845的博客
04-23 1万+
在微信小程序里效果图： 直接代码： &lt;canvas style="width: 400px; height: 400px;border:1px solid red" canvas-id="firstCanvas"&gt;&lt;/canvas&gt; //index.js Page({ data: { image: { src: ...
微信小程序 canvas 环形刻度 进度条
cengjing123_的博客
09-15 1671
最近做小程序需要一个环形刻度条，发现有关微信小程序的类似文章很少，目前只找到了一个关于H5的canvas绘制刻度条和我需求是一样的，于是自己改了改。
半圆形进度条(小程序)
liushuanglian的博客
11-21 3546
近期在做一个读书类的小程序，这时需要作出一个半圆形的进度条，等级进度条，就想着用canvas来完成，在网上百度了一下，参阅了这这篇博客博客地址，在结合实际需求加以修改。 这是ui的图片，一看就能知道这个需要自定义标题栏，然后这是一个长图，标题栏和下面的进度条的背景得分开来。上进度条的代码， wxml <view class="progress"> <canvas c...
小程序绘制环形图
hql1024的博客
03-31 1228
<view class='cir_list'> <block wx:for='{{canvasProgressbg}}' wx:for-item='item' wx:key='{{item.index}}'> <view class='cir_list_span'> <view class='pro...
小程序 canvas制作圆环倒计时
xiaoma19941027的博客
05-12 805
原文链接：https://blog.csdn.net/xjf18250534957/article/details/80094233?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158924449019195162527899%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.57675%2522%257D&request_id=158924449019195
小程序学习（12）：组件--彩色环形进度条
随便写写
09-26 748
小程序学习（12）：组件–彩色环形进度条 2019年9月26日 代码片段 代码片段 https://developers.weixin.qq.com/s/UoErDFma7Ebq 主文件 json "usingComponents": { "w-annulus2": "/component/w-annulus2/w-annulus2" } wxml <!-- 参数== pe...
请帮我写一个WPF 圆圈动画进度条
05-25
好的，以下是一个简单的 WPF 圆圈动画进度条示例： 首先，在 XAML 中定义一个圆形进度条控件： ```xml <Grid> <Ellipse x:Name="progressBar" Width="100" Height="100" Stroke="Gray" StrokeThickness="10"/> <TextBlock x:Name="percentText" Text="0%" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20"/> </Grid> ``` 然后，在代码中实现动画效果： ```csharp private void AnimateProgressBar(double value) { DoubleAnimation animation = new DoubleAnimation(); animation.From = progressBar.StrokeDashOffset; animation.To = progressBar.StrokeDashOffset - (2 * Math.PI * progressBar.Width / 4) * (value / 100.0); animation.Duration = new Duration(TimeSpan.FromSeconds(1)); progressBar.BeginAnimation(Ellipse.StrokeDashOffsetProperty, animation); percentText.Text = $"{value}%"; } ``` 其中，`StrokeDashOffset` 属性用于设置圆形进度条的起始位置，`DoubleAnimation` 用于定义动画效果，`BeginAnimation` 方法用于启动动画。在 `AnimateProgressBar` 方法中，通过计算圆形进度条的偏移量来实现动画效果，并将进度条的文本内容更新为当前进度值。 最后，在界面中调用 `AnimateProgressBar` 方法即可实现圆形进度条动画效果： ```csharp private void btnStart_Click(object sender, RoutedEventArgs e) { for (int i = 0; i <= 100; i++) { AnimateProgressBar(i); Thread.Sleep(50); } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值