使用 Javascript 防止 canvas 清除图像

Question

感谢您对此的帮助：

我有一个代码可以使用 Javascript:

将图像添加到 canvas

  var canvas = document.getElementById('QID8-Signature'),
    context = canvas.getContext('2d');
    base_image = new Image();
    base_image.src = 'https://adec.qualtrics.com/CP/Graphic.php?IM=IM_dmAm33It7ShDqAt';
    base_image.onload = function(){
    context.drawImage(base_image, 216, 168);
    }

图片添加成功；但是，清除按钮将其删除。有什么方法可以防止清除按钮擦除图像吗？

提前致谢

Answer 1

唯一的办法就是，清除canvas后重新绘制图像。

var clear = document.getElementById('QID10-ClearSignature'),
   canvas = document.getElementById('QID8-Signature'),
   context = canvas.getContext('2d'),
   base_image = new Image(),
   imgLoaded = false;
   
base_image.onload = function() {
   imgLoaded = true;
   context.drawImage(base_image, 0, 0, 216, 168);
   context.fillRect(10, 10, 20, 20);
};
base_image.src = 'https://adec.qualtrics.com/CP/Graphic.php?IM=IM_dmAm33It7ShDqAt';

clear.onclick = function(e) {
   e.preventDefault();
   if (!imgLoaded) return;
   context.clearRect(0, 0, canvas.width, canvas.height);
   context.drawImage(base_image, 0, 0, 216, 168);
}

canvas{border: 1px solid #ccc}

<button><span id="QID10-ClearSignature" class="ClearSignature">clear</span></button><br>
<canvas id="QID8-Signature" width="216" height="168"></canvas>

使用 Javascript 防止 canvas 清除图像

Preventing canvas from clearing image using Javascript

javascript

drawing

canvas