从 HTML5 Canvas 获取值到 Javascript答案

【问题标题】：Getting values from HTML5 Canvas to Javascript从 HTML5 Canvas 获取值到 Javascript
【发布时间】：2011-08-25 22:00:47
【问题描述】：

我正在做一个谷歌应用引擎的小项目。使用 html5 画布我需要向用户展示一个画布，用户可以在该画布上绘制节点和连接边。我需要使用 dijkstras 算法找到最短路径。

我的问题是，我想在单击提交按钮时从画布中获取值。这些值是节点和相应边的坐标。它将是一个可以存储列表的 json 数据结构。 主要问题是将值从画布获取到 javascript 以存储在 json 中。

我的身体部位包含

<body>
<div>
<canvas id="canvas" height="500" width="1000" style="border:1px solid #c3c3c3;"></canvas>
</div>

<div>
<input type="button" value="Submit" onclick="submit()">
</div>

</body>

提交函数要写什么？？？

【问题讨论】：

您无法从画布中获取该信息。画布只是一个位图，它不知道你在上面画了什么，更不用说“节点”和“边缘”了。既然你在上面画画，你需要把你当时的数据存储起来。
试试像fabric.js这样的画布抽象库，它将为您提供对象模型和对序列化的支持。

标签： javascript json html canvas html5-canvas

【解决方案1】：

如果您在 SVG 中进行，这将是一件轻而易举的事。不幸的是，canvas 是一个直接的绘图表面，这意味着当您绘制某些东西时，canvas 不会保留任何已绘制的内容。

在绘图阶段，您必须在绘图时自己跟踪所有必要的信息（节点和边）。否则信息根本不存在。

【讨论】：