![737b0bfc18a8d75f750ab46d201b49e5.png](https://i-blog.csdnimg.cn/blog_migrate/9b8f7b0e8da3f3fb1f66889477c7367a.png)
环形进
度条
![03500bdad94be6996a84ed27a6afef3e.png](https://i-blog.csdnimg.cn/blog_migrate/2776a86b52e7aaa4371c06503e1a8f6e.png)
秋季出行
![06c5523ec397d4988dc6b8be531d883c.png](https://i-blog.csdnimg.cn/blog_migrate/dd4ee771e79db8f23dc60af5588ae6cf.png)
老规矩,效果展示:
![60e423cf635bab3a1b40bf79fd722300.png](https://i-blog.csdnimg.cn/blog_migrate/a53e5b12541104acab69a8403d7aa246.png)
![d04567fe53723d2ee126dd906400d315.png](https://i-blog.csdnimg.cn/blog_migrate/3789b781b26a576a39dfd308ed6ade52.png)
看效果,我们决定用小程序的canvas2d进行绘画
小程序官方推荐使用canvas2d并且在onReady进行使用
![65fbfba9f8aac7d7064b600a14f2cf59.png](https://i-blog.csdnimg.cn/blog_migrate/510c2b54c9c134bf6f5c6261194e117f.png)
![982445387da67f21e3e68ff0ee7068b1.png](https://i-blog.csdnimg.cn/blog_migrate/dcb7a6c00ceed419038198d72f715c9e.png)
![3d2b7638bfb810f6c510b0c285b72e6c.png](https://i-blog.csdnimg.cn/blog_migrate/92c1c04f27529c2f216ac2ee85851f08.png)
![df2ee6360bcff379f6c9c7727400eac8.png](https://i-blog.csdnimg.cn/blog_migrate/7bec78fe6ca85f8d4234e236816a66ea.png)
先看布局
![e13d00b51416e76d147f0befa30fc25f.png](https://i-blog.csdnimg.cn/blog_migrate/715267de2b3f313848bcaaa20eaee5b2.png)
![075eab60036665f371c75bb572e30477.png](https://i-blog.csdnimg.cn/blog_migrate/ec3670a76aa20dcf775ab3b150f842e1.png)
{{c_val}}
{{tv_name}}
增加
减少
![2653aee2d0d31af40bb4486fcbd3450b.png](https://i-blog.csdnimg.cn/blog_migrate/cfe7ce444f76f0d61bad8ace061064f6.png)
![4feaaace34d6bb66213245c7eb0d0101.png](https://i-blog.csdnimg.cn/blog_migrate/b1befb44cb4bc9dee5143efba7ffbc08.png)
![e932db48bb2e4425948bd065a2e43de3.png](https://i-blog.csdnimg.cn/blog_migrate/c17b06296dceb5129100ecd61fd83c5e.png)
![88430525e4f9b8d57519196d8bbfc986.png](https://i-blog.csdnimg.cn/blog_migrate/e47fcb77701581d49dca0810bec8b7cb.png)
![ef82b403d8f7b485c13a4cc8ff5e0a57.png](https://i-blog.csdnimg.cn/blog_migrate/291e21d7c7a03f85f0c89fde65a10f52.png)
代码逻辑
![e13d00b51416e76d147f0befa30fc25f.png](https://i-blog.csdnimg.cn/blog_migrate/715267de2b3f313848bcaaa20eaee5b2.png)
![075eab60036665f371c75bb572e30477.png](https://i-blog.csdnimg.cn/blog_migrate/ec3670a76aa20dcf775ab3b150f842e1.png)
然后我们在.js文件中编写代码逻辑
初始化数据
var startDegree = 210; //从什么角度开始
var maxValue = 100; //最大值
var minValue = 0; //最小值
var lineWidth = 6; //线条宽度
var circle_r;
var ctx ;
var canvas;
let winWidth;
/**
* 页面的初始数据
*/
data: {
time: ''
},
在onReady中进行初始化绑定
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.setData({
c_val: 0,
tv_name: "展示分数"
})
const query = wx.createSelectorQuery()
query.select('#canvasring')
.fields({
node: true,
size: true
})
.exec((res) => {
canvas = res[0].node
ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
winWidth = wx.getSystemInfoSync().windowWidth;
circle_r = winWidth / 750 * 300 / 2; //画布的一半,用来找中心点和半径
//定义起始点
ctx.translate(circle_r, circle_r);
// var value = this.data.c_val; //当前的值
// var lineColor = "#393"; //线条颜色
var percent = 300 * ((this.data.c_val - minValue) / (maxValue - minValue)); //计算结果
this.showCircle(ctx,circle_r,startDegree,lineWidth,percent)
})
},
showCircle(ctx,circle_r,startDegree,lineWidth,percent) {
var linearGradient;
ctx.clearRect(-circle_r, -circle_r, canvas.width, canvas.height)
//灰色圆弧
ctx.beginPath();
ctx.strokeStyle = "#ebebeb"
ctx.lineCap = 'round'
ctx.lineWidth = lineWidth
ctx.arc(0, 0, circle_r - 10, startDegree * Math.PI / 180 - 0.5 * Math.PI,
300 * Math.PI / 180 + startDegree * Math.PI / 180 - 0.5 * Math.PI, false);
ctx.stroke();
ctx.closePath();
//有色彩的圆弧
ctx.beginPath();
linearGradient = ctx.createLinearGradient(
-Math.sin((30) * Math.PI / 180) * (circle_r - 10),
Math.cos((30) * Math.PI / 180) * (circle_r - 10),
-Math.sin((percent + 30) * Math.PI / 180) * (circle_r - 10),
Math.cos((percent + 30) * Math.PI / 180) * (circle_r - 10),
);
linearGradient.addColorStop(0, "#5096F1");
linearGradient.addColorStop(1, "#1C80F1");
ctx.strokeStyle = linearGradient
//ctx.strokeStyle = "#5096F1"
ctx.lineWidth = 12
ctx.arc(0, 0, circle_r - 10, startDegree * Math.PI / 180 - 0.5 * Math.PI,
percent * Math.PI / 180 + startDegree * Math.PI / 180 - 0.5 * Math.PI, false);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle = "#FFFFFF"
//ctx.fillStyle = "#FFFFFF"
ctx.lineWidth = 5
ctx.arc(
-Math.sin((percent + 30) * Math.PI / 180) * (circle_r - 10),
Math.cos((percent + 30) * Math.PI / 180) * (circle_r - 10),
2, 0, 2 * Math.PI, true);
//ctx.fill()
ctx.stroke();
ctx.closePath();
},
![2653aee2d0d31af40bb4486fcbd3450b.png](https://i-blog.csdnimg.cn/blog_migrate/cfe7ce444f76f0d61bad8ace061064f6.png)
![4feaaace34d6bb66213245c7eb0d0101.png](https://i-blog.csdnimg.cn/blog_migrate/b1befb44cb4bc9dee5143efba7ffbc08.png)
![e932db48bb2e4425948bd065a2e43de3.png](https://i-blog.csdnimg.cn/blog_migrate/c17b06296dceb5129100ecd61fd83c5e.png)
![88430525e4f9b8d57519196d8bbfc986.png](https://i-blog.csdnimg.cn/blog_migrate/e47fcb77701581d49dca0810bec8b7cb.png)
![ef82b403d8f7b485c13a4cc8ff5e0a57.png](https://i-blog.csdnimg.cn/blog_migrate/291e21d7c7a03f85f0c89fde65a10f52.png)
增加功能
![e2481d536727a41d656a7bcb61508da8.png](https://i-blog.csdnimg.cn/blog_migrate/63f65df216a3381f489d50ea2ddde560.png)
![2d62bb7f17ea96b93947b5eb188d727d.png](https://i-blog.csdnimg.cn/blog_migrate/9f052e405cc3442f2fda1bdecbbdc75f.png)
添加增加减少的功能
addNumber: function(){
clearInterval(this.data.time)
this.data.time = setInterval(()=>{
if(this.data.c_val
this.setData({
c_val: this.data.c_val+1
})
var percent = 300 * ((this.data.c_val - minValue) / (maxValue - minValue)); //计算结果
this.showCircle(ctx,circle_r,startDegree,lineWidth,percent)
}else{
clearInterval(this.data.time)
}
},50)
},
cutNumber: function(){
clearInterval(this.data.time)
this.data.time = setInterval(()=>{
if(this.data.c_val > 0){
this.setData({
c_val: this.data.c_val - 1
})
var percent = 300 * ((this.data.c_val - minValue) / (maxValue - minValue)); //计算结果
this.showCircle(ctx,circle_r,startDegree,lineWidth,percent)
}else{
clearInterval(this.data.time)
}
},50)
},
![10a618c64aca7666098b022c30734187.png](https://i-blog.csdnimg.cn/blog_migrate/530f36bc52a46c34ec394e9c672fc261.png)
![5f984572e6524733cc4933da5c58dd14.png](https://i-blog.csdnimg.cn/blog_migrate/b18c80e5e4ae437a63c3dde578c346bf.png)
![173c84d181a6a1cd973289d14f694c08.png](https://i-blog.csdnimg.cn/blog_migrate/cc65aa05141da5e4aa849461a58e98da.png)
![572bc4c312781fe353511f117bf4aad8.png](https://i-blog.csdnimg.cn/blog_migrate/d09b5d0d87dd3acfe72c591e02219948.jpeg)
![2ec699a81723461c61de9df3387284eb.png](https://i-blog.csdnimg.cn/blog_migrate/1399bd26323d01a7247a228785d39843.png)