在画布上显示用户的文本

时间:2012-10-26 14:41:05

标签: javascript html5 text canvas

现在我有3个元素。文本字段和提交按钮位于顶部,在它们下面是画布。我想在点击提交按钮后在画布上显示用户的输入。

我很高兴看到任何javascript建议

1 个答案:

答案 0 :(得分:1)

只因为我非常喜欢使用画布..这应该让你开始。为了将来参考,请确保在提出问题时发布您尝试过的内容,通常人们不喜欢为模糊问题提供完整的解决方案。

var btn = document.getElementsByTagName("input")[0],
    textArea = document.getElementsByTagName("textarea")[0],
    canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");
    canvas.width = 512;

    ctx.font = "12px Arial";
    ctx.fillStyle = "#000";

    btn.addEventListener("click", function(){
        ctx.fillText(textArea.value,10,10);
    });
​

<强> Live Demo