通过在Javascript中获取用户输入，将Text替换为Image

Replace Text with Image by get user input in Javascript?

本文关键字：Text 替换 Image 输入 用户 Javascript 获取      更新时间：2023-09-26

我必须修改这个程序，将图像替换为文本。在这个程序中，输入框的值应该反映在气球图像的位置。你能帮我吗？

程序链接：

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

工作Fiddle

使用文本拖动更新Fiddle

我会这样做：

$(document).ready(function() {
  var d_canvas = document.getElementById('canvas');
  var context = d_canvas.getContext('2d');
  var background = document.getElementById('background');
  context.drawImage(background, 0, 0);
  $('.drag').draggable();
  $('#draw').click(function() {
      var $canvas = $('#canvas');
var textX = $('#myText').offset().left - $canvas.offset().left;
var textY = $('#myText').offset().top - $canvas.offset().top + 12;
        context.font= "13px Arial";
        context.fillText($("#myText").text(),textX,textY);
        $('#myText').hide();
    $(this).attr('disabled', 'disabled');
  });
});
$("#theText").keyup(function(){
    $("#myText").text($(this).val());
});

这是更新的JSFiddle演示

相关文章：