撥開使用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

回答

相關問題