旧的:
<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) ;
}
},