微信小程序 canvas心得

1、使用canvas_id索引；

2、canvas_id如果在js里，通过setData改变，可能是无效的，

一次性赋值后改变不了；

3、canvas_id单独用一个data维护，数据改变后，canvas_id固定不变，可重复渲染；

 

canvas-id="{{canvas_ids[index]}}"

xml中 使用 data 的 index属性

 

   for (var i = 0; i < this.data.mydata.length; i++) {

   var info = this.data.mydata[i];

   var canvasId = this.data.canvas_ids[i]

   var value = info.value

   var name = info.name

    var ctx = wx.createCanvasContext(canvasId)

    this.roundRect(ctx, 0, 0, FullW * value/100, H, r, '#0079FF')

    ctx.draw();

}