在canvas画布上作画

// 初始化画布
initCanvas() {
let that = this;
let canvas = document.getElementById(“reservoirCanvas”);
canvas.height = 170;
canvas.width = 422;
let ctx = canvas.getContext(“2d”);
let img = new Image();
img.src= “/static/localdata/sk-img.jpg”
//canvas距离坝顶的高度
let staticHeight = 34;//34px
//大坝底部到坝顶的高度 ，大坝固定高度173.6m 1m = 154/173.6 px
let dBHeight = 154; //154px,
let sw = (this.popData.pmt.z)*(154/173.6)
let xg = 154-sw
let bl = 154/173.6//1px代表的高度
this.xzsw = xg+34//最新水位在画布上的高度
img.onload = function(){
//画出一个矩形，参数依次是：距离y轴距离；距离x轴距离；矩形长度；矩形宽度
ctx.rect(0,xg+34,422,sw);
// 填充水的颜色
ctx.fillStyle = “rgb(190,240,251)”;
ctx.fill();
//背景图片
ctx.drawImage(img,0,0,canvas.width,canvas.height);
that.initCanvasText(ctx)
}
},
// 在canvas上添加文字
initCanvasText(ctx) {
ctx.lineWidth = 3;//直线的宽度
ctx.beginPath();//开始在画布上作画
ctx.moveTo(40,this.xzsw); //直线距离y轴距离，直线左端距离画布顶部的距离
ctx.lineTo(200,this.xzsw);//决定直线的长度；直线右端距离画布顶部的距离
ctx.stroke();//结束成线
ctx.strokeText(“最新水位：”+this.popData.pmt.z+‘m’,240,this.xzsw);
},

注意字迹模糊，要配合ctx.scale使用