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

Question

如果你看看我到目前为止所做的事情，它将有助于解释我所追求的，因为我通常很难解释哈哈。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 上？

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

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

先感谢您！

score 0 · Accepted Answer

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

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

1 回答 1