JavaScript Canvas 绘制 WiFi 信号强度图表

以下是一个使用 Canvas 绘制 WiFi 信号强度图的示例代码：

// 获取 Canvas 元素
var canvas = document.getElementById('canvas');
// 获取 2D 绘图上下文
var ctx = canvas.getContext('2d');
// 设置 Canvas 宽度和高度
canvas.width = 400;
canvas.height = 200;

// 定义 WiFi 信号强度数组
var signalStrength = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

// 绘制 WiFi 信号强度图
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.font = '12px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for(var i = 0; i < signalStrength.length; i++) {
  var x = i * canvas.width / signalStrength.length + canvas.width / signalStrength.length / 2;
  var y = canvas.height - signalStrength[i] * canvas.height / 100;
  ctx.fillRect(x - 5, y, 10, canvas.height - y);
  ctx.fillText(signalStrength[i] + '%', x, y - 10);
}

该代码会在 Canvas 中绘制一个黑色背景的矩形，然后在矩形中绘制 WiFi 信号强度的柱状图。具体绘制过程如下：

1. 设置 Canvas 的宽度和高度为 400x200。
2. 定义一个数组 'signalStrength'，用于表示 WiFi 信号强度，其中每个元素的值为 10 到 100 之间的整数。
3. 绘制黑色背景矩形。
4. 设置绘图的填充色为白色、字体为 12px Arial，并设置文本对齐方式为居中对齐、基线为中线对齐。
5. 使用循环来遍历 'signalStrength' 数组，计算出每个柱状图的位置和高度，并在 Canvas 中绘制出来。柱状图的宽度为 Canvas 的宽度除以 'signalStrength' 数组的长度，柱状图的高度根据对应的信号强度值来计算。同时，在每个柱状图的中心位置绘制出信号强度的百分比值。

该代码可以根据实际需求进行修改，比如修改 Canvas 的宽度和高度、修改信号强度数组的值、修改绘图的样式等。