canvas画线

基础用法

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置线条样式
ctx.strokeStyle = '#ff0000'; // 红色线条
ctx.lineWidth = 5; // 线条宽度

// 开始绘制路径
ctx.beginPath();
ctx.moveTo(0, 0); // 起点
ctx.lineTo(0, 50); // 终点

// 绘制线条
ctx.stroke();

封装调用

drawLine(x1, y1, x2, y2, color, lineWidth) {
	const canvas = document.getElementById('myCanvas');
	const ctx = canvas.getContext('2d');
	// 设置线条样式
	ctx.strokeStyle = color; // 红色线条
	ctx.lineWidth = lineWidth; // 线条宽度
	
	// 开始绘制路径
	ctx.beginPath();
	ctx.moveTo(x1, y1); // 起点
	ctx.lineTo(x2, y2); // 终点
	
	// 绘制线条
	ctx.stroke();
}

this.drawLine(0, 0, 0, 50, 'red', 3)

循环调用

for (let i = 0; i < serverData.length; i++) {
	this.drawLine(100 * i, 0, 100 * i, 50, 'red', 3)
}