小程序canvas怎么实现画布半圆环

这篇文章主要讲解了“小程序canvas怎么实现画布半圆环”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“小程序canvas怎么实现画布半圆环”吧！

效果图：

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"  ></canvas>  </view></view>

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;}

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 的范围内循环递增或递减，这个圆环的进度条就动起来了！

感谢各位的阅读，以上就是“小程序canvas怎么实现画布半圆环”的内容了，经过本文的学习后，相信大家对小程序canvas怎么实现画布半圆环这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！