// components/Canvas/canvas.js
Component({
/**
* 组件的属性列表
*/
properties: {
ProgressbgId: {
type: String,
value: "1"
},
ProgressId: {
type: String,
value: "2"
},
num: {
type: Number,
value: 65
},
size:{
type:Number,
value:50
},
circle:{
type: Number,
value:44
},
width:{
type:Number,
value:100
},
type:{
type:Boolean,
value:true
}
},
/**
* 组件的初始数据
*/
data: {
num:0,
ProgressbgId: '',
ProgressId: '',
},
/**
* 组件的方法列表
*/
methods: {
drawProgressbg() {
const ctx = wx.createCanvasContext(this.data.ProgressbgId, this)
ctx.setLineWidth(7); // 设置圆环的宽度
ctx.setStrokeStyle('#EEF0F5'); // 设置圆环的颜色
ctx.setLineCap('round') // 设置圆环端点的形状
ctx.beginPath(); //开始一个新的路径
ctx.arc(this.data.size, this.data.size, this.data.circle, 0, 2 * Math.PI, false);
ctx.stroke(); //对当前路径进行描边
ctx.draw();
ctx.closePath();
},
drawCircle: function () {
let cirl = Math.PI * 2
let quart = Math.PI / 2
var context = wx.createCanvasContext(this.data.ProgressId, this);
const grd = context.createLinearGradient(0,0,100,100)
if(this.data.type){
grd.addColorStop(0, '#667EFF')
grd.addColorStop(0.5, '#8F5AE8')
grd.addColorStop(1, '#A646DB')
}else{
grd.addColorStop(0, '#24D8ED')
grd.addColorStop(1, '#4A67FB')
}
context.setLineWidth(7);
context.setStrokeStyle(grd);
context.setLineCap('round')
context.beginPath();
context.arc(this.data.size, this.data.size, this.data.circle, -quart, ((cirl) * this.data.num / 100) - quart, false);
context.stroke();
context.draw();
context.closePath();
},
},
ready: function () {
this.drawProgressbg();
this.drawCircle()
},
})
这是公用进度条子组件,目前除了在华为meta20上发现这种问题,模拟机和其它手机都没这种问题
一个canvas就可以实现,怎么用了两个呢?
我也遇到这个问题,mate9和p30
同样的问题,更坑的是空心矩形,无解context.strokeRect(x, y, w, h),只能用4条线代替
同样的问题,更坑的是空心矩形,无解context.strokeRect(x, y, w, h),只能用4条线代替
找到了一个解决方案 ,画完以后其实已经画上去了,只是华为手机上的小程序canvas因为某种原因没显示出来,改变下大小就好了,我给宽度+1 然后在-1 就好了
我试了你的代码,应该跟我是同一个问题
供参考:
https://developers.weixin.qq.com/community/develop/doc/0008a6dacd0c78b994c85feff53c00
延迟1s是可以了,不过时间有点长
我的是荣耀V20的也是执行完draw不显示,界面有刷新才显示
有什么解决的方法吗?
抛弃了canvas,重新用css实现的
css有办法实现圆形渐变进度条吗?有例子吗
https://developers.weixin.qq.com/s/rwkm1pmR7B9q
这是示例代码片段,用华为meta20手机验证了问题可以复现
麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
https://developers.weixin.qq.com/s/rwkm1pmR7B9q
这是示例代码片段,用华为meta20手机验证了问题可以复现
华为meta20仅该机型不行吗?我测试了下华为nova3e,微信版本7.0.4,未复现该问题
荣耀V20也有这种问题
不放在组件下可以吗?延迟渲染试下?
延迟渲染试过了,不放在组件里没有试