微信小程序——画布

旧的：

<canvas canvas-id="powerCanvas" style='width:{{cWidth}}px;height:{{cHeight}}px'></canvas>

var power_canvas = wx.createCanvasContext('powerCanvas' , that) ;

绘制X轴、Y轴

power_canvas.beginPath();

power_canvas.setStrokeStyle('green');

power_canvas.moveTo(40,0);

power_canvas.lineTo(40,110);

power_canvas.lineTo(that.data.cWidth , 110 );

power_canvas.stroke() ;

power_canvas.closePath();

绘制标线

power_canvas.beginPath();

power_canvas.setStrokeStyle('#c3c3c3');

for(let i=0 ;i<10 ; i++){

power_canvas.moveTo(40,i*10+10);

power_canvas.lineTo(that.data.cWidth , i*10+10 );

}

power_canvas.stroke() ;

power_canvas.closePath();

绘制线

power_canvas.beginPath() ;

power_canvas.setLineWidth(1);

power_canvas.setStrokeStyle('red') ;

for (let i = 0; i < that.data.powerlist.length ; i++) {

power_canvas.moveTo(that.data.listX[i] + 40 , that.data.listY[i]) ;

power_canvas.arc(that.data.listX[i] + 40 , that.data.listY[i] , 0.5 , 0, 2 * Math.PI) ;

power_canvas.fill() ;

}

power_canvas.stroke();

power_canvas.closePath();

绘制Y标轴文字

power_canvas.setFillStyle('black') ;

for (let i = 0; i < 11 ; i++) {

power_canvas.setFontSize(10) ;

power_canvas.textAlign = 'right' ;

power_canvas.textBaseline = 'middle' ;

power_canvas.fillText(100 - i*10, 35 , i*10+10) ;

}

绘制X标轴文字

power_canvas.setStrokeStyle('red') ;

var xval = (that.data.cWidth - 60) / 5 ;

var tval = (that.data.timeMAX - that.data.timeMIN) / 5 ;

for (let i = 0; i < 6 ; i++) {

that.data.textY[i] = util.formatTimeTwo((that.data.timeMIN + tval*i) , 'M-D' ) ;

//power_canvas.rotate(2*Math.PI / 40) ;

power_canvas.textAlign="center" ;

power_canvas.fillText(that.data.textY[i], xval*i + 40, 125) ;

}

power_canvas.draw() ;

新的：

<canvas id="powerCanvas" type="2d" style='width:{{cWidth}}px;height:{{cHeight}}px;'></canvas>

drawing: function(){

var that = this ;

that.drawpower() ;

wx.createSelectorQuery()

.select('#powerCanvas')

.fields({ node: true, size: true })

.exec((res) => {

const canvas = res[0].node

const power_canvas = canvas.getContext('2d')

///设置分辨率

const dpr = wx.getSystemInfoSync().pixelRatio

canvas.width = res[0].width * dpr

canvas.height = res[0].height * dpr

power_canvas.scale(dpr, dpr)

power_canvas.fillRect(0, 0, 100, 100)

that.newDraw( power_canvas ) ;

})

},

newDraw: function(power_canvas) {

var that = this;

power_canvas.clearRect(0, 0, that.data.cWidth , that.data.cHeight )

绘制X轴、Y轴

power_canvas.beginPath();

power_canvas.fillStyle = '#09BA07' ;

power_canvas.strokeStyle = '#09BA07' ;

power_canvas.moveTo(40,0);

power_canvas.lineTo(40,110);

power_canvas.lineTo(that.data.cWidth , 110 );

power_canvas.stroke() ;

power_canvas.closePath();

绘制标线

power_canvas.beginPath();

power_canvas.strokeStyle = '#c3c3c3' ;

for(let i=0 ;i<10 ; i++){

power_canvas.moveTo(40,i*10+10);

power_canvas.lineTo(that.data.cWidth , i*10+10 );

}

power_canvas.stroke() ;

power_canvas.closePath();

绘制线

power_canvas.beginPath() ;

power_canvas.lineWigth = 1 ;

power_canvas.strokeStyle = '#f00' ;

for (let i = 0; i < that.data.powerlist.length ; i++) {

power_canvas.moveTo(that.data.listX[i] + 40 , that.data.listY[i]) ;

power_canvas.arc(that.data.listX[i] + 40 , that.data.listY[i] , 0.5 , 0, 2 * Math.PI) ;

}

power_canvas.stroke();

power_canvas.closePath();

绘制Y标轴文字

power_canvas.fillStyle = '#000' ;

for (let i = 0; i < 11 ; i++) {

power_canvas.font = 10 ;

power_canvas.textAlign = 'right' ;

power_canvas.textBaseline = 'middle' ;

power_canvas.fillText(100 - i*10, 35 , i*10+10) ;

}

绘制X标轴文字

power_canvas.strokeStyle = '#f00' ;

var xval = (that.data.cWidth - 60) / 5 ;

var tval = (that.data.timeMAX - that.data.timeMIN) / 5 ;

for (let i = 0; i < 6 ; i++) {

that.data.textY[i] = util.formatTimeTwo((that.data.timeMIN + tval*i) , 'M-D' ) ;

power_canvas.textAlign = "center" ;

power_canvas.fillText(that.data.textY[i], xval*i + 40, 125) ;

}

},