Question

要查看我的问题，请点击此fiddle。

当您想要添加文本时，文本字段可见。然后键入内容并在画布上单击一两次，文本变为可见。当您更改为文本并再次单击时，另一个文本可见和旧的一个更改：（这就是问题所在。

说明

我使用sketch.js，你可以在那里绘制一些东西并将其删除。我的想法是，例如将文本添加到画布。所以我在工具栏中添加了一个新工具：

<a href="#tools_sketch" data-tool="text">Text</a>

然后我添加了一个文本字段，当您单击文本工具时可以看到该字段。

function setVisible () {
    document.getElementById("div_for_textfield").style.display="block";
}
function setNotVisible () {
    document.getElementById("div_for_textfield").style.display="none";
}

到目前为止，非常好。

在sketch.js中，我写了一个新工具“text”，它从文本字段中获取值并将其添加到画布中：

var text = document.getElementById("textfield_for_text_tool").value;
this.context.fillText(text, event.x, event.y);

有谁知道我做错了什么？

感谢大家阅读！

修改：我刚刚使用http://jsfiddle.net/rjAUa/中的示例和http://oldstatic.travisberry.com/demos/canvas-text-demo/index.html的答案创建了另一个小提琴Add multiple instances of text to an HTML5 canvas - 现在的问题是当我离开时画布文本未保存。问题是sketch.js我用的是什么。如何在不使用sketch.js的情况下编写文本工具？

如何从textfield到html5 canvas输入texte

0 个答案: