HTML5 Javascript：将文本保存到画布上？

Posted 2023-02-22

【中文标题】HTML5 Javascript：将文本保存到画布上？

【英文标题】：HTML5 Javascript: Save text onto canvas?

【发布时间】：2013-05-13 19:00:34

【问题描述】：

如果你看看我到目前为止所做的事情，它将有助于解释我所追求的，因为我通常无法解释哈哈。 http://logomakr.bugs3.com/

在我的绘图应用程序中，我实现了向画布添加文本的功能，但是，它不像形状那样记录/保存到画布上。当我尝试查看它时，似乎 html Canvas 文本倾向于放置在画布上而不是它上面。 我什至抄了一个简单的：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

为了测试它，它在画布上显示得很好而且很漂亮，但是一旦你画了一个形状，它就会消失，甚至只是按下保存按钮，文本不在 png 上？

是否有替代方案或解决方法？

（如果您需要查看代码，请告诉我，尽管我确信您将能够在网站上查看源代码）

提前谢谢你！

【问题讨论】：

首先尝试解决这两个 Uncaught SyntaxError: Unexpected token

啊，是的，这是免费服务器自动添加的脚本。所以如果上传到普通服务器可能不会说那个错误？

【参考方案1】：

对于绘制的形状（矩形、圆形、线条），您使用 mouseup 事件触发将“tempCanvas”保存到“realCanvas”。

但是对于文本，您根本没有将 tempCanvas 保存到 realCanvas。然后，当您清除 tempCanvas 以获取其他绘图时，文本会被吹走。也许您可以添加一个 [保存文本] 按钮，以便用户可以触发将文本的 tempCanvas 保存到 realCanvas。

【讨论】：

嗯，谢谢你花时间解释，我会试试的，谢谢！ :D

非常感谢您的款待！谢谢你解释我必须做什么！ :D