javascript - 通过在 Javascript 中获取用户输入将文本替换为图像？

Question

我必须修改这个程序以用文本替换图像。在这个程序中，输入框的值应该反射(reflect)在气球图像的地方。你能帮帮我吗？

程序链接:

$('#draw').click(function() {
    var text = document.getElementById('txtBallon').value;

        var $ballon = $('#ballon'),
            $canvas = $('#canvas');
        var ballon_x = $ballon.offset().left - $canvas.offset().left,
            ballon_y = $ballon.offset().top - $canvas.offset().top;

        context.drawImage(ballon, ballon_x, ballon_y);

        $ballon.hide();
        $(this).attr('disabled', 'disabled');
    });

JSFiddle

Answer 1

您可以按照以下方式进行操作:

context.font = "30px Verdana";
context.fillText(text,ballon_x,ballon_y);

代替 context.drawImage(ballon, ballon_x, ballon_y);

Working Fiddle

Updated Fiddle with text drag