怎么让绘制出来的矩形框在页面保持住

要让绘制出来的矩形框在页面上保持住，你需要将矩形框的位置和大小保存下来，然后在页面重新加载或者刷新之后，重新绘制这个矩形框。

以下是一个简单的例子，展示如何将矩形框的位置和大小保存到 localStorage 中，并在页面加载时重新绘制这个矩形框：

<svg width="100" height="100" onload="loadRect()">
  <rect id="rect" x="0" y="0" width="0" height="0" fill="blue" />
</svg>

<script>
var rect = document.getElementById("rect");

function startDraw(event) {
  // ...
}

function draw(event) {
  // ...
}

function endDraw() {
  // Save rect position and size to localStorage
  localStorage.setItem("rectX", rect.getAttribute("x"));
  localStorage.setItem("rectY", rect.getAttribute("y"));
  localStorage.setItem("rectWidth", rect.getAttribute("width"));
  localStorage.setItem("rectHeight", rect.getAttribute("height"));
}

function loadRect() {
  // Load rect position and size from localStorage
  var rectX = localStorage.getItem("rectX");
  var rectY = localStorage.getItem("rectY");
  var rectWidth = localStorage.getItem("rectWidth");
  var rectHeight = localStorage.getItem("rectHeight");
  
  // Set rect position and size
  rect.setAttribute("x", rectX);
  rect.setAttribute("y", rectY);
  rect.setAttribute("width", rectWidth);
  rect.setAttribute("height", rectHeight);
}
</script>

上面的代码会在页面中绘制一个可以通过鼠标拖拽绘制的蓝色矩形。当用户松开鼠标时，会将矩形的位置和大小保存到 localStorage 中。当页面重新加载或者刷新时，会从 localStorage 中加载矩形的位置和大小，并重新绘制这个矩形框。

请注意，这只是一个简单的例子，并不能处理多个矩形框的情况。如果你需要处理多个矩形框，你需要将它们的位置和大小保存到一个数组或者对象中，并在页面加载时遍历这个数组或者对象，重新绘制每一个矩形框。