要添加线条来创建每个气泡周围的网格吗？

.bubble-container {
  position: relative;
}

.bubble-container::before,
.bubble-container::after {
  content: "";
  position: absolute;
  background-color: #000; /* 网格线条的颜色 */
}

.bubble-container::before {
  width: 1px; /* 网格线条的宽度 */
  height: 100%; /* 网格线条的高度 */
  left: 50%; /* 网格线条的位置 */
  transform: translateX(-50%); /* 居中对齐 */
}

.bubble-container::after {
  width: 100%; /* 网格线条的宽度 */
  height: 1px; /* 网格线条的高度 */
  top: 50%; /* 网格线条的位置 */
  transform: translateY(-50%); /* 居中对齐 */
}

// 获取气泡容器的位置和尺寸信息
var bubbleContainer = document.querySelector(".bubble-container");
var containerRect = bubbleContainer.getBoundingClientRect();
var containerWidth = containerRect.width;
var containerHeight = containerRect.height;
var containerLeft = containerRect.left;
var containerTop = containerRect.top;

// 创建Canvas元素
var canvas = document.createElement("canvas");
canvas.width = containerWidth;
canvas.height = containerHeight;
bubbleContainer.appendChild(canvas);

// 绘制线条
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "#000"; // 网格线条的颜色
ctx.lineWidth = 1; // 网格线条的宽度

// 绘制垂直线条
for (var x = 0; x <= containerWidth; x += 10) {
  ctx.beginPath();
  ctx.moveTo(x, 0);
  ctx.lineTo(x, containerHeight);
  ctx.stroke();
}

// 绘制水平线条
for (var y = 0; y <= containerHeight; y += 10) {
  ctx.beginPath();
  ctx.moveTo(0, y);
  ctx.lineTo(containerWidth, y);
  ctx.stroke();
}