|
|
@ -120,10 +120,35 @@
|
|
|
|
const color = colors[i - 1]; // 获取当前颜色
|
|
|
|
const color = colors[i - 1]; // 获取当前颜色
|
|
|
|
const x = ((i - 1) % 32) * gridWidth; // 计算x坐标
|
|
|
|
const x = ((i - 1) % 32) * gridWidth; // 计算x坐标
|
|
|
|
const y = Math.floor((i - 1) / 32) * gridHeight; // 计算y坐标
|
|
|
|
const y = Math.floor((i - 1) / 32) * gridHeight; // 计算y坐标
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 绘制格子
|
|
|
|
// 绘制格子
|
|
|
|
ctx.fillStyle = color; // 设置填充颜色为十六进制颜色值
|
|
|
|
ctx.fillStyle = color; // 设置填充颜色为十六进制颜色值
|
|
|
|
ctx.fillRect(x, y, gridWidth, gridHeight); // 绘制矩形格子
|
|
|
|
ctx.fillRect(x, y, gridWidth, gridHeight); // 绘制矩形格子
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
for (let i = 1; i <= 768; i++) {
|
|
|
|
|
|
|
|
const x = ((i - 1) % 32) * gridWidth; // 计算x坐标
|
|
|
|
|
|
|
|
const y = Math.floor((i - 1) / 32) * gridHeight; // 计算y坐标
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (Math.min(...tems) === e.rows[0]['site' + i]) {
|
|
|
|
|
|
|
|
ctx.font = '12px Arial';
|
|
|
|
|
|
|
|
ctx.fillStyle = 'blue';
|
|
|
|
|
|
|
|
ctx.fillText('I', x + gridWidth / 2 - 6, y + gridHeight / 2 + 6);
|
|
|
|
|
|
|
|
ctx.strokeStyle = 'blue';
|
|
|
|
|
|
|
|
ctx.lineWidth = 1;
|
|
|
|
|
|
|
|
ctx.strokeText('I', x + gridWidth / 2 - 6, y + gridHeight / 2 + 6);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (Math.max(...tems) === e.rows[0]['site' + i]) {
|
|
|
|
|
|
|
|
ctx.font = '12px Arial';
|
|
|
|
|
|
|
|
ctx.fillStyle = '#fff';
|
|
|
|
|
|
|
|
ctx.fillText('A', x + gridWidth / 2 - 6, y + gridHeight / 2 + 6);
|
|
|
|
|
|
|
|
ctx.strokeStyle = '#fff';
|
|
|
|
|
|
|
|
ctx.lineWidth = 1;
|
|
|
|
|
|
|
|
ctx.strokeText('A', x + gridWidth / 2 - 6, y + gridHeight / 2 + 6);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|