HTML5 Javascript:将文本保存到画布上?

时间:2013-05-13 19:00:35

标签: javascript html5 text canvas

如果你看看我到目前为止做了什么,它将有助于解释我所追求的内容,因为我很难解释通常哈哈。 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上了?

是否有替代方案或方式?

(如果您需要查看代码,请告诉我,但我相信您可以在网站上查看来源)

提前谢谢!

1 个答案:

答案 0 :(得分:0)

对于绘制的形状(rects,circle,lines),您正在使用mouseup事件触发将“tempCanvas”保存到“realCanvas”。

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