自定义画圆进度条，带波浪动态效果

代码如下：

首先计算比例，通过高度与直径之比；

大于半径和小于半径两部分

ctx.beginPath();
           if(posY>radius){
               ctx.arc(radius,radius,radius,startangle,Math.PI-startangle);
           }else{
               ctx.arc(radius,radius,radius,-startangle,Math.PI+startangle);
           }
           ctx.setFillStyle('#01BA48')
           ctx.setStrokeStyle('#01BA48')
           ctx.fill();
           ctx.stroke()

先画一个圆弧不带波浪的实体部分，如下图：

然后再话一个空的和实体的部分圆弧行成波浪，用一个定时器控制这个空的和实体两个小部分左右移动，方向自己定义

如下图：

最后画好背景和文字部分就完成了这个整体波浪运动效果，整体效果如下：

<template>
<view>
<view style="margin-top: 200rpx;"><view ><canvas class="cir-view" canvas-id="myCanvas4"></canvas></view>
</view>
</view>
</template>
<script>
const app = getApp();
export default {data() {return {timer:null,};},onShow: async function () {this.drawQuadraticCurve4();},methods: {drawQuadraticCurve4() {var obj = this.obj;var startX = 150,itemWidth = 50,offset = 0,baseLine = 10,waveHeight = 20,direction = 1,waveDirection = -1,percent = 0.3,radius=91,offsetY=0.2,offsetrY= 0.3var posY = 2*radius * (1-percent); // 所在位置Y值var h= Math.abs(radius - posY); // 高var arrow = Math.sqrt(radius*radius - h*h);//半弦长console.log("arrow====>"+arrow);const ctx = uni.createCanvasContext('myCanvas4')var startX = radius - arrow;// d=200  80%   160  100   60 100// θ=2*acos(h/d)  弦对应角度var angle = 2*Math.acos(h/radius);console.log("angle====>"+angle);var startangle =  (Math.PI - angle)*0.5;console.log("startangle====>"+angle);var itemwidth = 2*arrow;var left = 0;setInterval(runcircle,100);function drawText() {ctx.globalCompositeOperation = 'source-over';var size = 34;ctx.font = '500 ' + size + 'px PingFang-SC-Medium, PingFang-SC';var txt = '+'+(percent.toFixed(2) * 100).toFixed(0) + '%';var fonty = radius + size / 2;var fontx = radius - size * 0.8;//字体颜色ctx.fillStyle = "rgba(8, 77, 25, 0.9)";ctx.textAlign = 'center';ctx.fillText(txt, radius + 5, radius)}function drawDescText() {ctx.globalCompositeOperation = 'source-over';var size = 13;ctx.font = '500 ' + size + 'px PingFang-SC-Medium, PingFang-SC';var txt = '+'+(percent.toFixed(2) * 100).toFixed(0) + '%';var fonty = radius + size / 2;var fontx = radius - size * 0.8;//字体颜色ctx.fillStyle = "#084D19";ctx.textAlign = 'center';ctx.fillText("本月成交率",radius + 5, radius + 24)}function runcircle(){ctx.beginPath();ctx.arc(radius,radius,radius,0,Math.PI*2);ctx.setFillStyle('#B3F0CB')ctx.setStrokeStyle('#B3F0CB')ctx.fill();ctx.stroke()ctx.beginPath();if(posY>radius){ctx.arc(radius,radius,radius,startangle,Math.PI-startangle);}else{ctx.arc(radius,radius,radius,-startangle,Math.PI+startangle);}ctx.setFillStyle('#01BA48')ctx.setStrokeStyle('#01BA48')ctx.fill();ctx.stroke()for(var i =0;i<6;i++){var posX = itemwidth*i + left;ctx.beginPath()ctx.moveTo(posX+offset+startX,posY+offsetY)ctx.quadraticCurveTo(posX +startX+arrow*0.5+offset,posY-waveHeight,posX +startX+arrow+offset, posY+offsetY);ctx.lineTo(posX+startX+offset, posY+offsetY)ctx.setFillStyle('#01BA48')ctx.setStrokeStyle('#01BA48')ctx.setLineWidth(0.01)ctx.fill()ctx.beginPath()ctx.moveTo(posX + radius+offset,posY-offsetrY)ctx.quadraticCurveTo(posX + arrow*1.5+offset,posY+waveHeight,posX+ (radius*2 - startX)+offset, posY-offsetrY);ctx.lineTo(posX + radius*2 - startX, posY-offsetrY)ctx.setFillStyle('#B3F0CB')ctx.setStrokeStyle('#B3F0CB')ctx.setLineWidth(0.01)ctx.fill()}// ctx.fillStyle="#ff00000";//         ctx.strokeStyle="#0000ff";//         ctx.lineWidth=3;//         ctx.rect(0,0,radius*2,radius*2);//         ctx.fill();//填充//         ctx.stroke();//绘制边框//         ctx.clearRect(50,50,150,150)//         ctx.clearRect()// ctx.beginPath();// ctx.moveTo(0,0)// ctx.lineTo(2*radius,0)// ctx.lineTo(2*radius,2*radius)// ctx.lineTo(0,2*radius)// ctx.setFillStyle('#F13737')// ctx.fill()ctx.beginPath();ctx.arc(radius,radius,radius,0,Math.PI*2);ctx.setFillStyle('transparent')ctx.setStrokeStyle('#FFFFFF')ctx.setLineWidth(15)ctx.fill();ctx.stroke()// ctx.beginPath();// ctx.arc(radius,radius,radius,0,Math.PI*2);// ctx.clip();drawText()drawDescText()ctx.draw()if (waveDirection == 1) {offset = offset + 1} else if (waveDirection == -1) {offset = offset - 1}if (offset >= 5*itemwidth) {offset = 0;}console.log("offset===>"+offset);}    }}
};
</script>
<style>
.cir-view{border-radius: 50%;width: 182px;height: 182px;background: #B3F0CB;
}
</style>

自定义画圆进度条，带波浪动态效果相关推荐

用Raphael在网页中画圆环进度条（简化版）
上篇写了用Raphael画圆环进度条(http://boytnt.blog.51cto.com/966121/1074215),这一篇把它简化一下,只画一条比较粗的弧,优点是简单,缺点是不能做渐变色了 ...
基于canvas 2D实现微信小程序自定义组件-环形进度条
基于canvas 2D实现微信小程序自定义组件-环形进度条最近开发一个小程序项目博闻金榜答题小程序,需要使用到一个可以显示答题倒计时的组件,基于进度条实现,下面就主要介绍基于canvas2D实现一个 ...
android 自定义音乐圆形进度条,Android自定义View实现音频播放圆形进度条
本篇文章介绍自定义View配合属性动画来实现如下的效果实现思路如下: 根据播放按钮的图片大小计算出圆形进度条的大小根据音频的时间长度计算出圆形进度条绘制的弧度通过Handler刷新界面来更新圆形 ...
Android Paint应用之自定义View实现进度条控件
在上一篇文章<Android神笔之Paint>学习了Paint的基本用法,但是具体的应用我们还没有实践过.从标题中可知,本文是带领读者使用Paint,自定义一个进度条控件. 上图就是本文要 ...
用Raphael在网页中画圆环进度条
条状的进度条我们见得太多了,实现起来比较简单,它总是长方形的,在方形的区域里摆放就不太好看了.随着css3的出现,圆环状的进度条开始用得越来越多,不过由于IE6/7/8不支持css3,我们只能换其它方 ...
自定义绘制圆形进度条
自定义圆形进度条 Android 圆形进度条控件 demo示例 1.定义 attrs.xml <?xml version="1.0" encoding="utf-8 ...
Android 自定义斑马波纹进度条
参考地址: GitHub - Ccapton/Android-ColorfulProgressBar: Android 自定义彩色ProgressBar,类似Bootstrap android绘图ca ...
微信小程序自定义封装环形进度条组件
我们先看效果-选不了视频没办法了说明:此组件对圆的宽度,进度条的宽度.颜色.旋转方向,还有进度条的值,还有两端是否要圆角都进行了动态化,无坑可放心用,参数解释在注释里,我就不写了 .效果图看到尾部的 ...
Android自定义圆形下载进度条,Android自定义之圆形进度条
先来看看效果图,有图才有真相: Usage Android Studio 使用Gradle构建 dependencies { compile 'com.github.ws.circleprogress ...

自定义画圆进度条，带波浪动态效果

自定义画圆进度条，带波浪动态效果相关推荐

最新文章

热门文章