我初步估计还是.js中的ctx.arc(400/this.data.rate/2,400/this.data.rate/2,400/this.data.rate/2-2*lineWidth,0,2 * Math.PI,false) 这一句有问题 t通过修改2 * Math.PI,我可以得到三分之一个圆,三分之二个圆,就是得不到一整个圆
我用更新后的vanvas画圆,得到的结0果却很逆天,真的离谱,大家来帮忙看看?.js中的代码 [图片]drawBg:function(){ const lineWidth = 6 / this.data.rate;//rpx转px const query = wx.createSelectorQuery() query.select("#progress_bg")//选择查找图片 .fields({node : true , size : true}) .exec((res) => { 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) ctx.lineCap='round' ctx.lineWidth=4 ctx.beginPath() ctx.arc(400/this.data.rate/2,400/this.data.rate/2,400/this.data.rate/2-2*lineWidth,0,2 * Math.PI,false) ctx.strokStyle="#000000" ctx.stroke() }) } .wsml中的代码 <view class="progress"> <canvas class="progress_bg" id="progress_bg" type="2d"></canvas> <canvas class="progress_active" id="progress_active" type="2d"></canvas> <view class="progress_num">20:00</view> </view> .wxss中的代码 .progress{ margin-left: auto; margin-right: auto; margin-top: 200rpx; width: 400rpx; height: 400rpx; background-color: red; position: relative; } .progress .progress_background,.progress_avtive{ position: absolute; } .progress .progress_num{ position: absolute; font-style: italic; font-size: 50rpx; font-weight: bold; margin-left: 125rpx; margin-top: -300rpx; }
2023-12-03
获得过 0 次赞
回答过的问题获得 0 次赞
分享过的文章/案例获得 0 次赞
评论与回复获得 0 次赞