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

1、效果圖：

2、wxml：

view

view

view{{perfumePercent}}%/view

view香水余量/view

/view

view

viewbindtap="resetTab"hover-

imagesrc="/static/image/reset.png"mode="widthFix"/image

view復位/view

/view

/view

view

canvasid="perfumeBalance"type="2d"/canvas

/view

/view

3、wxss：

.fragModel_hover{box-shadow:0.2rem00.3rem#8fd0e0,-0.2rem00.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:8px13px;background-color:rgba(50,80,80.68);border-radius:15px;transition:all.3sease-in;font-size:12px;}

.fragPsoReset.fragReset_icon{width:22px;height:22px;}

.fragRing{width:220px;height:120px;margin:auto;}

4、js：

letperfumeNum=1.5;

Page({

data:{

perfumePercent:0,//香水余量

/**

*生命周期函數(shù)--監(jiān)聽頁面加載

*/

onLoad:function(options){

letthat=this;

//香水余量圓環(huán)

constquery=wx.createSelectorQuery()

query.select('#perfumeBalance').fields({node:true,size:true}).exec((res)={

that.initRing(res);

})

//b、香水余量

initRing(res){

letthat=this;

constcanvas=res[0].node

constctx=canvas.getContext('2d');

constdpr=wx.getSystemInfoSync().pixelRatio//設備像素比

canvas.width=res[0].width*dpr

canvas.height=res[0].height*dpr

ctx.scale(dpr,dpr);

varcircleR=220/2;//畫布的一半，用來找中心點和半徑

ctx.translate(0,0);

//定義起始點

functiondraw(){

ctx.clearRect(0,0,canvas.width,canvas.height);

//取色圓環(huán)

ctx.beginPath();

ctx.strokeStyle='#fff';//transparent

ctx.lineWidth=12;

ctx.lineCap='round'//設置圓環(huán)端點的形狀

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(){

letthat=this;

perfumeNum=2;//香水余量為100%

that.setData({

p