1

我正在尝试使用 HTML5 画布，我只是在制作一个有趣的小网络应用程序，但我被卡住了。

我希望用户在文本框中输入文本，然后当他们按下按钮时，该文本会使用 TextFill 添加到画布中。

这是我所拥有的：

        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        var words = document.getElementById("words").value;
        var x = 80;
        var y = 110;

        ctx.font = "bold 36px sans-serif";
        ctx.fillStyle = "blue";
        $('#entertext').click(function(){
            ctx.fillText(words, x, y);
        });

所以我显然有一个画布，myCanvas，和一个id=words的文本输入框，以及一个id=entertext的按钮...

如果你想完全重做我的代码，那完全没问题。

4

1 回答 1

0

从评论扩展，我猜你是words在一个“静态”上下文中分配的，比如window.onload.

而且因为是一个字符串，它是通过 valuedocument.getElementById("words").value分配/复制的，所以很可能是一个空字符串，不管后来变成什么。wordsdocument.getElementById("words").value

所以解决方案要么赋值words为document.getElementById("words")，所以它是一个对象“指针”，或者获取click事件内部的值：

$('#entertext').click(function(){
    ctx.fillText($("#words").val(), x, y);
});

工作演示。

于 2013-02-22T03:22:24.947 回答