Canvas草图可保存为Base64图片或路径点数组至localStorage，恢复时解析并重绘；Base64适合静态快照，路径点更轻量灵活且支持编辑，需注意存储限制与安全性。
可以将Canvas绘制内容转为Base64图片数据或路径点数组，再用localStorage保存；恢复时从localStorage读取并重绘到Canvas上。
保存草图：转为可存储的数据格式
localStorage只能存字符串，不能直接存Canvas对象或二进制图像。推荐两种方式：
-
保存为Base64图片（适合静态快照）：调用
canvas.toDataURL("image/png")获取PNG格式的Base64字符串，然后存入localStorage。例如：localStorage.setItem("sketch", canvas.toDataURL("image/png")); -
保存为绘图路径点数组（适合可编辑草图）：监听鼠标/触控事件，记录每条线的起点、终点、笔触粗细、颜色等信息，组织成结构化数组（如
[{x:10,y:20,stroke:"#000",lineWidth:2}, ...]），再用JSON.stringify()转为字符串保存。这种方式支持后续修改、撤销、缩放等交互。
恢复草图：从localStorage读取并重绘
页面加载后检查localStorage是否有保存的数据，有则解析并还原到Canvas：
- 若存的是Base64图片，创建
Image对象，设置src为该字符串，在onload中用ctx.drawImage(img, 0, 0)绘制到Canvas上。 - 若存的是路径点数组，先用
JSON.parse(localStorage.getItem("sketch"))还原数组，再遍历每个点或每条线段，调用ctx.beginPath()、ctx.moveTo()、ctx.lineTo()等方法逐段重绘，并设置对应样式（ctx.strokeStyle、ctx.lineWidth）。
注意兼容性与存储限制
localStorage在所有主流浏览器中都支持HTML5，但单域名下容量通常仅5MB左右（实际约2.5–10MB，因浏览器而异）。需注意：
- Base64图片体积较大（比原始像素大~33%），频繁保存高清草图容易超限；建议压缩尺寸或改用路径点方式。
- 路径点方式更轻量、更灵活，但需自行管理绘图状态（如是否启用抗锯齿、是否开启阴影等）。
- 敏感草图不建议长期存在localStorage，可提供“清除草图”按钮：
localStorage.removeItem("sketch");
简单示例：一键保存+恢复
给Canvas加两个按钮：
- 保存按钮绑定：
document.getElementById("saveBtn").onclick = () => { localStorage.setItem("sketch", JSON.stringify(strokes)); }; - 恢复按钮绑定（或放在
window.onload中）：const saved = localStorage.getItem("sketch"); if (saved) { strokes = JSON.parse(saved); redraw(); }
其中strokes是当前所有线条的数据数组，redraw()是清空Canvas并按strokes重绘的函数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
