小程序canvas怎么實現(xiàn)畫布半圓環(huán)

這篇文章主要講解了“小程序canvas怎么實現(xiàn)畫布半圓環(huán)”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“小程序canvas怎么實現(xiàn)畫布半圓環(huán)”吧！

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>復(fù)位</view>
    </view>
  </view>
  <view class="fragRing">
    <canvas id="perfumeBalance" type="2d"  ></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, // 香水余量
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    let that = this;
    // 香水余量圓環(huán)
    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 // 設(shè)備像素比
    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);
      // 取色圓環(huán)
      ctx.beginPath();
      ctx.strokeStyle = '#fff';//transparent
      ctx.lineWidth = 12;
      ctx.lineCap='round' // 設(shè)置圓環(huán)端點的形狀
      ctx.arc(circleR, circleR-10, circleR - 35, Math.PI, 2 * Math.PI, false);
      ctx.stroke();
      ctx.closePath();
      console.log("香水余量")
      // 進度_香水余量
      ctx.beginPath(); // 起始一條路徑，或重置當(dāng)前路徑
      ctx.lineWidth = 6;  // 線條寬度
      ctx.lineCap='round' // 線條的結(jié)束端點樣式
      ctx.arc(circleR, circleR-10, circleR - 35, Math.PI,perfumeNum * Math.PI, false);
      ctx.strokeStyle = "#00CED1";//transparent
      ctx.stroke();
      canvas.requestAnimationFrame(draw);
    }
    draw();
  },
 
  // 復(fù)位
  resetTab(){
    let that = this;
    perfumeNum = 2; // 香水余量為100%
    that.setData({
      perfumePercent: 100,
    })
  },
})

當(dāng)然，你弄一個定時器，讓 perfumeNum 的值一直 在 0 ~ 2 的范圍內(nèi)循環(huán)遞增或遞減，這個圓環(huán)的進度條就動起來了！

感謝各位的閱讀，以上就是“小程序canvas怎么實現(xiàn)畫布半圓環(huán)”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對小程序canvas怎么實現(xiàn)畫布半圓環(huán)這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！