防止畫布使用Java腳本清除圖像

Question

感謝您對此的幫助：

我有一個使用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);
    }

圖像添加成功； 但是，清除按鈕將其刪除。 有什么方法可以防止清除按鈕刪除圖像嗎？

提前致謝

Answer 1

唯一的方法是，在清除畫布后重新繪制圖像。

 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>