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

更新時(shí)間：2022年06月30日 11:56:46 作者：逸曦穆澤

這篇文章主要為大家詳細(xì)介紹了小程序canvas實(shí)現(xiàn)畫布半圓環(huán)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了小程序canvas實(shí)現(xiàn)畫布半圓環(huán)的具體代碼，供大家參考，具體內(nèi)容如下

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" 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, // 香水余量
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
? ?*/
? 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; // 畫布的一半，用來(lái)找中心點(diǎn)和半徑
? ? ctx.translate(0, 0); ? // 定義起始點(diǎn)
? ? 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)端點(diǎn)的形狀
? ? ? ctx.arc(circleR, circleR-10, circleR - 35, Math.PI, 2 * Math.PI, false);
? ? ? ctx.stroke();
? ? ? ctx.closePath();
? ? ? console.log("香水余量")
? ? ? // 進(jìn)度_香水余量
? ? ? ctx.beginPath(); // 起始一條路徑，或重置當(dāng)前路徑
? ? ? ctx.lineWidth = 6; ?// 線條寬度
? ? ? ctx.lineCap='round' // 線條的結(jié)束端點(diǎn)樣式
? ? ? 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)然，你弄一個(gè)定時(shí)器，讓 perfumeNum 的值一直在 0 ~ 2 的范圍內(nèi)循環(huán)遞增或遞減，這個(gè)圓環(huán)的進(jìn)度條就動(dòng)起來(lái)了！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: