我正在使用画布制作形状。这些形状是可拖动的。如何保存形状的位置，以便当我返回页面时，形状与我拖动到的位置相同？
【问题讨论】：
canvas 元素不会跟踪绘制到它的任何位置，它只是用作可绘制表面。
canvas 的浏览器都支持 SVG 和对于场景中只有少数对象的情况，或者您正在将叠加层放置在可以从头开始渲染或由现有位图组成的图形或其他图像上，这可能是一个不错的选择。
@K3N 为您提供了对 localStorage 的大量存储。
这是一个简单的例子，我们用它来将拖动的对象存储到数据库中。
几件事：
我们使用 jCanvas 来抽象和清理与canvas 的交互。这太不可思议了。它不仅提供了更好的界面，而且在 canvas 的基础上增加了一些很棒的功能。
这也意味着我们正在使用 jQuery。
我们使用 Rails 后端将位置存储到数据库中的记录中。
这是实现此功能的基本代码：
$('canvas').drawRect({
layer: true,
name: 'myRect-1',
draggable: true,
fillStyle: '#6c1',
x: 100, y: 100,
width: 100, height: 100,
dragstop: function(layer) {
var path = '/objects/1/';
var payload = { id: 1, x: layer.x, y: layer.y };
$.post( path, { _method: 'PUT', payload } );
}
});
还有here is the sandbox的拖拽交互和代码：
一旦您完成此交互并通过 AJAX 将位置数据发送到后端，您显然需要更新后端以处理发送的数据并更新存储对象位置的记录。
希望对您有所帮助。
日本
【讨论】：
最简单的解决方案是使用Web Storage（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();
如果浏览器本身支持画布，它很可能也有 Web Storage。
【讨论】：
您可以将服务器上的数据保存在一些持久存储中（不是会话，因为那是临时的）。数据库或文件是一个好的开始。
另外，由于您使用的是 HTML5，您可以使用 HTML5 的本地持久存储来保存您的形状。
【讨论】：
根据您的用例，您可以将形状元数据存储在客户端的 cookie 中，服务器端的会话变量中。或者将其保存在服务器上的数据库中。
【讨论】：