uniapp中使用canvas根据两点坐标画出路径

效果图：此处坐标为(2,4)和(3,5)

html
设定canvas-id和类名

<canvas canvas-id="myCanvas" class="content"></canvas>

data

		data() {
			return {
				width: 0,
				height: 0,
				startX: 2,
				startY: 4,
				endX: 3,
				endY: 5
			}
		},
		onLoad() {
			this.getInfor();
			this.drawline();
		}

methods
1.为了在不同的设备里显示一样的比例，获取屏幕的宽高

getInfor() {
				var that = this;
				uni.getSystemInfo({
					success: function(res) {
						console.log(res);
						that.width = res.windowWidth;
						that.height = res.windowHeight;
					}
				})
			}

2.画出格子

drawline() {
				var w = this.width
				const ctx = uni.createCanvasContext('myCanvas')//传入canvas-id
				//横线
				for (var i = 0; i <= 10; i++) {
					ctx.moveTo(0, w / 10 * i)
					ctx.lineTo(w, w / 10 * i)
				}
				//竖线
				for (var i = 0; i <= 10; i++) {
					ctx.moveTo(w / 10 * i, 0)
					ctx.lineTo(w / 10 * i, w)
				}
				//保证坐标落在相应位置
				ctx.moveTo(w/10*this.startX-w/20,w/10*this.startY-w/20)
				ctx.lineTo(w/10*this.endX-w/20,w/10*this.endY-w/20)
				ctx.stroke()
				ctx.draw()
			}

踩坑点：未设置canvas的宽高导致方格图不完整
css

.content {
		width: 100vw;
		height: 100vw;
		margin: 0;
		padding: 0;
	}