uniapp利用canvas绘制ECG网格图附带心电图显示------代码

之前是一个关于如何绘制心电图的代码，后续需求是添加ECG的网格背景图也是利用canvas绘制的
先看代码：

<template>
	<view>
		<page-head :title="title"></page-head>
		<!-- 心电图显示区 -->
		<view class="displayarea">
			心电图显示区
			<view class="container">
				<view class="box2">
					<canvas canvas-id="line" style="width: 100%; height: 500px;"></canvas>
				</view>
				<view class="box1">
					<canvas canvas-id="ecg" style="width: 100%; height: 500px;"></canvas>
				</view>
			</view>
		</view>
		<!-- 遮罩 -->
		<!-- 按钮 -->
				<view class="uni-padding-wrap uni-common-mt">
					<view class="uni-btn-v">
						<button type="primary" :disabled="disabled" @click="openBluetoothAdapter">连接蓝牙</button>
						<button type="primary" :disabled="!disabled" @click="closeBLEConnection">断开蓝牙设备</button>
						<button type="primary" :disabled="!disabled" @click="closeBluetoothAdapter">关闭蓝牙模块</button>
					</view>
				</view>
	</view>
</template>
<script>
	let num = 0;
	let timer = null;
	export default {
   
		data() {
   
			return {
   
				title: 'bluetooth',
				disabled: false,
				deviceId: '',
				serviceId: '0000FFF0-0000-1000-8000-00805F9B34FB',
				writeCharacteristicsId: '',
				connectCharacteristicsId: '',
				characteristicId: '0000FFF1-0000-1000-8000-00805F9B34FB',
				heartRateData: [],
				macAddress: '',
				macValue: '',
				valueChangeData: {
   
					value: ''
				},
				extraLine: [],
			};
		},
		onLoad() {
   
			this.setOnBLECharacteristicValueChange();
			// 自动连接蓝牙获取心电图，如果不需要直接注释掉
			this.openBluetoothAdapter();
		},
		// 在页面退出的时候变为竖屏
		onHide() {
   
			uni.setScreenOrientation({
    orientation: 'portrait' })
		},
		onShow() {
   
			const ctx = uni.createCanvasContext('ecg', this);
			if (timer != null) {
   
				clearInterval(timer);
			}
			timer = setInterval(() => {
   
				if (this.heartRateData.length > 0) {
   
					this.drawLine(ctx, this.heartRateData)
				}
			}, 50)
			setTimeout(() => {
   
				this.drawGrid(); // 页面准备好时绘制网格图
			}, 2000)
			// 启动横屏
			uni.setScreenOrientation({
   
				orientation: 'landscape'
			})
		},
		beforeDestroy() {
   
			clearInterval(timer);
			timer = null;
			this.closeBLEConnection()
			uni.closeBluetoothAdapter()
		}, 
		methods: {
   
			drawGrid() {
   
				const canvasId = 'line';
				this.drawSmallGrid(canvasId);
				this.drawMediumGrid(canvasId);
				this.drawBigGrid(canvasId);
			},
			// 绘制小网格
			drawSmallGrid(canvasId) {
   
				const ctx = uni.createCanvasContext(canvasId, this);
				ctx.setStrokeStyle('#FFDFDF'); // 设置线条颜色
				ctx.setLineWidth(1); // 设置线条宽度
				for (let x = 0.5; x < 750; x += 3) {
    // 以 3px 为间隔绘制纵线
					ctx.moveTo(x, 0);
					ctx.lineTo(x, 750);
				}
				for (let y = 0.5; y < 750; y += 3) {
    // 以 3px 为间隔绘制横线
					ctx.moveTo(0, y);
					ctx.lineTo(750, y);
				}
				ctx.stroke(); // 进行绘制
				ctx.draw(true); // 保留之前的绘制内容
			},
			// 绘制中等网格
			drawMediumGrid(canvasId) {
   
				const ctx = uni.createCanvasContext(canvasId, this);
				ctx.setStrokeStyle('#FFBFBF'); // 设置线条颜色
				ctx.setLineWidth(1); // 设置线条宽度
				for (let x = 0.5; x < 750; x += 15) {
    // 以 15px 为间隔绘制纵线
					ctx.moveTo(x, 0);
					ctx.lineTo(x, 750);
				}
				for (let y = 0.5; y < 750; y += 15) {
    // 以 15px 为间隔绘制横线
					ctx.moveTo(0, y);
					ctx.lineTo(750, y);
				}
				ctx.stroke(); // 进行绘制
				ctx