微信小程序——画布

旧的:

<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) ;

}

},

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值