Javascript 将画布数据保存到浏览器

所以我正在用HTML5画布构建一个非常简单的绘图应用程序

基本上，我希望用户能够在画布上画一条线，关闭浏览器，然后返回，这条线仍然存在

---

这可能吗？我发现您可以将画布另存为图像，但我是否可以将该图像重新加载回新的画布？

我将尽力向您解释。 正如您所说，您可以将画布的内容保存为图像，但是在处理图像之后？对于一个相当明显的安全问题，您无法将图像保存在用户的计算机上。一种方法是创建一个服务器（例如，在node.js中始终使用javascript），当用户决定保存图形时，将创建图像，图像将发送到服务器，并加载到连接到服务器的数据库中。但这是一个非常复杂的解决方案，仅在特定条件下有用，例如，如果您希望在应用程序的用户之间交换图像。对于您和大多数人来说，将图形保存在localstorage中就足够了

什么是HTML Web存储？ 使用web存储，web应用程序可以在用户浏览器中本地存储数据

使用本地存储，您可以保存和读取将保留在浏览器中的变量。 变量的值只能是字符串，但没有问题！ 例如，如果您希望（如下面的小项目中）将对象或数组保存在本地存储中，您可以将它们转换为字符串json（如果您不知道什么是json，请看这里和这里）。 如果您想查看应用程序保存的变量，对于google chrome，打开控制台，转到Appliaction选项卡，您将发现它们是本地存储和会话存储（另一种存储数据的方式） 在这个小项目中，我们保存了组成图形的点阵列。有关localstorage的更多信息，请访问以下链接： 但是，请记住，并非所有浏览器都支持本地存储，因此此应用程序无法用于较旧的浏览器，请使用chrome，这样您就没事了

Html代码：

要绘制的应用程序
html，
身体{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
文本对齐：居中；
大纲：0；
}
#渲染{
边框：5px实心rgba（120120129,0.452）；
边界半径：10px；
}
.集装箱{
位置：绝对位置；
左：50%；
最高：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.按钮{
边框：2倍实心；
边界半径：10px；
宽度：100px；
过渡：.5s；
}
.保存{
边框颜色：#4CAF50；
背景色：#4CAF50；
颜色：白色；
}
.保存：悬停{
背景色：白色；
颜色：黑色；
}
.清楚{
边框颜色：#008CBA；
背景色：#008CBA；
颜色：白色；
}
.清除：悬停{
背景色：白色；
颜色：黑色；
}
这是我得到的最详细的答案之一，非常感谢！我不知道我怎么会不想保存实际绘制的点，然后在加载时重新绘制它们。与我的项目完美配合。