html - 如何在 Canvas 中保存可拖动形状的位置？

Question

我正在使用 Canvas 制作形状。这些形状是可拖动的。如何保存形状的位置，以便当我返回页面时形状位于我将其拖动到的相同位置？

Answer 1

本地存储

最简单的解决方案是使用网络存储(localStorage/sessionStorage)。

要完成这项工作，您可以使用可序列化对象来存储形状信息，例如:

var myShapeStack = []; //all objects here

function myShape(x, y, width, height) {
    this.type = 'rectangle';
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    //...
    return this;
}

//...
//get the coords from drawing, then
var shape1 = new shape1(x, y, w, h);
myShapeStack.push(shape1);

现在您可以使用 Web Storage 存储整个堆栈:

localStorage.setItem('shapes', JSON.stringify(myShapeStack);

下次加载和初始化时:

myShapeStack = localStorage.getItem('shapes');
myShapeStack = (myShapeStack !== null) ? JSON.parse(myShapeStack) : [];

如果您以后要删除它:

localStorage.removeItem('shapes');

或者暴力破解一切:

localStorage.clear();

如果浏览器本身支持 Canvas ，它很可能也有网络存储。