Question

我需要一个帮助。我无法使用canvas和Javascript在画布上绘制多个文本。我在下面解释我的代码。

<div class="form-group">
<label for="exampleInputEmail1">Coupon Title</label>
<input type="text" name="emails" id="copTitle" class="form-control" placeholder="Add Coupon Title" value="<?php echo $email; ?>" required>
</div>

<div class="form-group">
<label for="coupondiscount">Coupon Discount</label>
<input name="coupondiscount" id="coupondiscount" class="form-control" placeholder="Add Coupon Discount" value="<?php echo $email; ?>" type="text"  required>
</div>
 <div class="couponimg" style="display:none;" id="blankImagediv">
<img class="img-responsive thumbnail" style="margin-bottom:9px; display:none;" src="images/coupon-banner-blank.jpg" crossorigin="anonymous" id="requiredImage">
<canvas id="canvas" class="img-responsive thumbnail" style="margin-bottom:9px;"></canvas>
</div>

我的javascript部分在下面给出。

var canvas = document.getElementById('canvas'),
  img = document.getElementById('requiredImage'),
  ctx = canvas.getContext('2d');
  img.onload = drawImage;
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.font = "26px Calibri";
  $(document).on('input', '#copTitle', function() {
      $('#blankImagediv').css('display', 'block');

      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0);
      ctx.fillStyle = "#0D5F90";
      ctx.fillText($(this).val(), 160, 40);
  });
  $(document).on('input', '#coupondiscount', function() {
      console.log('hii');
      $('#blankImagediv').css('display', 'block');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0);
      ctx.fillStyle = "#0D5F90";
      ctx.fillText($(this).val(), 180, 90);
  });
  function drawImage()
  {
     ctx.drawImage(img, 0, 0);
  }

这里我需要当用户在第一个输入字段上写入文本时，它将写在图像的顶部，当用户在第二个输入字段上写文本时，它将写在图像的不同位置，但第一个文本不应该替换。这是我的问题，每个文字都在替换他人。请帮助我。

Answer 1

我认为原因是你每次都清理画布，然后绘制图像然后插入文本。因此它删除旧文本并添加新文本。如果符合您的要求，请尝试以下代码，可能对您有帮助。

var canvas = document.getElementById('canvas'),
img = document.getElementById('requiredImage'),
ctx = canvas.getContext('2d');
img.onload = drawImage;
canvas.width = img.width;
canvas.height = img.height;
ctx.font = "26px Calibri";
$(document).on('input', '#copTitle', function() {
    $('#blankImagediv').css('display', 'block');

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0);
    ctx.fillStyle = "#0D5F90";
    ctx.fillText($(this).val(), 160, 40);
});
$(document).on('input', '#coupondiscount', function() {
    ctx.fillStyle = "#0D5F90";
    ctx.fillText($(this).val(), 180, 90);
});
function drawImage()
{
   ctx.drawImage(img, 0, 0);
}

无法使用画布和Javascript在图像上绘制多个文本

1 个答案: