如何使用HTML绘制数字行

<canvas id="myCanvas" width="500" height="100"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 设置绘制的字体样式
ctx.font = "30px Arial";
// 设置绘制的文本颜色
ctx.fillStyle = "black";
// 设置绘制的文本对齐方式
ctx.textAlign = "center";
// 设置绘制的文本基线位置
ctx.textBaseline = "middle";

// 绘制数字行
var startX = 50; // 起始X坐标
var startY = 50; // 起始Y坐标
var numCount = 10; // 数字个数
var numWidth = 40; // 数字宽度
var numHeight = 60; // 数字高度
var numSpacing = 10; // 数字间距

for (var i = 0; i < numCount; i++) {
  var num = i.toString(); // 将数字转换为字符串
  var x = startX + (numWidth + numSpacing) * i; // 计算当前数字的X坐标
  var y = startY; // 计算当前数字的Y坐标
  ctx.fillText(num, x, y); // 绘制当前数字
}