canvas画图
发布于 7 年前 作者 wsong 1285 次浏览 来自 问答

canvas画图按钮切换第二次不显示,第三次正常,后面都正常

html:

<canvas canvas-id=“Canvas” wx:if="{{!showchoose}}">

</canvas>

<button bindtap=“aa”>左</button>

<button bindtap=“aa”>右</button>

js:

page({

data:{

s:0

},

getcanvas(data, total) {

total=25*this.data.s

let rpx=’’

wx.getSystemInfo({

success(res) {

rpx = res.windowWidth / 375;

},

})

var array = [];

for (var s in data) {

array.push(data[s])

}

let t=this.data.s

array = [5 * t, 5 * t, 5 * t, 5 * t, 5 * t]

var ctx = wx.createCanvasContext(‘Canvas’, this);

ctx.restore()

var colors = ["#FAC01E", “#DCDCDC”, “#7A9BF0”, “#26B9A0”, “#0F8EE9”];

var point = {

x: 80*rpx,

y: 80*rpx

};

var radius = 50;

for (var i = 0; i < array.length; i++) {

ctx.beginPath();

var start = 0;

if (i > 0) {

for (var j = 0; j < i; j++) {

start += array[j] / total * 2 * Math.PI;

}

}

var end = start + array[i] / total * 2 * Math.PI;

var len = (i == 0 || i == 1) ? 0 : (i == 2 || i == 4) ? 10 : 20

ctx.arc(point.x, point.y, (radius + len)*rpx, start, end);

ctx.setLineWidth(1)

ctx.lineTo(point.x, point.y);

ctx.setStrokeStyle(colors[i]);

ctx.setFillStyle(colors[i]);

ctx.fill();

ctx.closePath();

}

ctx.draw();

this.setData({

s:this.data.s+10

})

ctx.save()

},

aa(){

this.getcanvas

}

})

直接写死数据都还是这样,就第二次不出现,简直了

1 回复

使用hidden试下

回到顶部