HTML 列表排序后 Canvas 内容丢失的解决方法

在 HTML 列表中，如果每个 li 元素都包含一个 Canvas，并且对列表进行重新排序后，你会发现 Canvas 的内容会丢失。这是因为排序操作会改变 li 元素在 DOM 中的位置，而 Canvas 内容是与特定元素绑定的，因此在排序后它们就无法正确关联了。

为了解决这个问题，你可以尝试在排序前将每个 Canvas 的内容保存到一个数组中，然后在排序后再把内容赋回每个 Canvas 中。代码示例如下：

HTML：

<ul id="myList">
  <li><canvas id="canvas1"></canvas></li>
  <li><canvas id="canvas2"></canvas></li>
  <li><canvas id="canvas3"></canvas></li>
</ul>

JavaScript：

var canvasContents = [];

// 保存每个 canvas 的内容
$("#myList canvas").each(function() {
  canvasContents.push($(this)[0].toDataURL());
});

// 对列表进行排序
$("#myList").sortable();

// 在排序后把内容赋回每个 canvas 中
$("#myList canvas").each(function(index) {
  $(this)[0].getContext("2d").clearRect(0, 0, $(this)[0].width, $(this)[0].height);
  var img = new Image();
  img.onload = function() {
    $(this)[0].getContext("2d").drawImage(img, 0, 0);
  }
  img.src = canvasContents[index];
});

注意，保存 Canvas 内容时需要使用 `toDataURL()` 方法，而在赋回时需要使用 `drawImage()` 方法。另外，如果 Canvas 的尺寸发生改变，需要手动清空画布。