小程序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.webp" 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 的范围内循环递增或递减,这个圆环的进度条就动起来了!

推荐阅读