我用更新后的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;
}
