拨开使用Javascript

图像防止画布我感激您对此的帮助：拨开使用Javascript

我有使用增加了一个图像到画布上的Javascript代码：

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); 
    }

的图像已成功添加;但是，清除按钮会将其删除。有没有一种方法可以防止清除按钮来擦除图像？

在此先感谢

来源

2017-06-01 Asma

什么是明确的按钮？只是删除它。 – Jiro90

它是什么样的按钮？你可以尝试听一下点击它并使用'.preventDefault（）'。 – Zenoo

我不确定它是什么类型的按钮。但我需要的是有办法连续检查画布是否为空并再次添加图像。 – Asma

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

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>

来源

2017-06-01 07:32:58

非常感谢Gaand。有没有一种方法可以将侦听器添加到画布上，以便如果图像被移除，那么它会重新添加它？ – Asma

问题是，我正在使用Qualtrics系统，我无法将自定义功能添加到清除按钮。所以我正在寻找解决方法。感谢您的帮助 – Asma

清除按钮的唯一目的是清除画布右侧？你知道清除按钮的id吗？如果是这样，那么你可以覆盖它的功能 –

拨开使用Javascript

回答

相关问题