小程序canvas实现画布半圆环
作者：逸曦穆泽
这篇文章主要为大家详细介绍了小程序canvas实现画布半圆环，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了小程序canvas实现画布半圆环的具体代码，供大家参考，具体内容如下
1、效果图：
2、wxml：
<view class="fragrance_item">
<view class="fragPos">
<view class="fragNum">{{perfumePercent}}%</view>
<view class="fragText">香水余量</view>
</view>
<view class="fragPsoReset">
<view bindtap="resetTab" class="fragReset" hover-class="fragModel_hover">
<image class="fragReset_icon" src="/static/image/reset.png" mode="widthFix"> </image>
<view>复位</view>
</view>
</view>
<view class="fragRing">
<canvas id="perfumeBalance" type="2d" style="width: 220px; height: 120px;" ></canvas>
</view>
</view>3、wxss：
.fragModel_hover{box-shadow: 0.2rem 0 0.3rem #8fd0e0, -0.2rem 0 0.3rem #58bfd1;}
.fragrance_item{position: relative;margin-left: 15px;margin-right: 15px;}
.fragPos{position: absolute;left: 50%; top: 50%;transform: translateX(-50%);text-align: center;}
.fragPos .fragNum{color:#32CD32;}
.fragPsoReset{position: absolute;right: 3px;top: 36px;text-align: center;}
.fragPsoReset .fragReset{display:inline-block;padding:8px 13px;background-color: rgba(50,80,80.68);border-radius: 15px;transition: all .3s ease-in;font-size: 12px;}
.fragPsoReset .fragReset_icon{width:22px;height:22px;}
.fragRing{width: 220px;height:120px;margin: auto;}4、js：
let perfumeNum = 1.5;
Page({
data: {
perfumePercent: 0, // 香水余量
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this;
// 香水余量圆环
const query = wx.createSelectorQuery()
query.select('#perfumeBalance') .fields({ node: true, size: true }).exec((res) => {
that.initRing(res);
})
},
// b、香水余量
initRing(res) {
let that = this;
const canvas = res[0].node
const 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);
var circleR = 220 / 2; // 画布的一半，用来找中心点和半径
ctx.translate(0, 0); // 定义起始点
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 取色圆环
ctx.beginPath();
ctx.strokeStyle = '#fff';//transparent
ctx.lineWidth = 12;
ctx.lineCap='round' // 设置圆环端点的形状
ctx.arc(circleR, circleR-10, circleR - 35, Math.PI, 2 * Math.PI, false);
ctx.stroke();
ctx.closePath();
console.log("香水余量")
// 进度_香水余量
ctx.beginPath(); // 起始一条路径，或重置当前路径
ctx.lineWidth = 6; // 线条宽度
ctx.lineCap='round' // 线条的结束端点样式
ctx.arc(circleR, circleR-10, circleR - 35, Math.PI,perfumeNum * Math.PI, false);
ctx.strokeStyle = "#00CED1";//transparent
ctx.stroke();
canvas.requestAnimationFrame(draw);
}
draw();
},
// 复位
resetTab(){
let that = this;
perfumeNum = 2; // 香水余量为100%
that.setData({
perfumePercent: 100,
})
},
})当然，你弄一个定时器，让 perfumeNum 的值一直 在 0 ~ 2 的范围内循环递增或递减，这个圆环的进度条就动起来了！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。