html 列表，每个li里都有一个canvas 对列表重新排序后 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 的尺寸发生改变，需要手动清空画布。