通过在Javascript中获取用户输入，将文本替换为图像？ [英] Replace Text with Image by get user input in Javascript?

问题描述

我必须修改此程式才能将图片换成文字。在这个程序中，输入框的值应该反映在气球图像的位置。

I have to modify this program to replace image with text. In this program, the value of input box should reflect in the place of balloon image. Could you help me ?

计划连结：

$('#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

推荐答案

您可以采取以下方式：

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

而不是 context.drawImage（ballon，ballon_x，ballon_y） code>

Instead of context.drawImage(ballon, ballon_x, ballon_y);

Working Fiddle

Working Fiddle

更新小调文字拖动

Updated Fiddle with text drag

这篇关于通过在Javascript中获取用户输入，将文本替换为图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！