[英]Preventing canvas from clearing image using 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);
}
图像添加成功; 但是,清除按钮将其删除。 有什么方法可以防止清除按钮删除图像吗?
提前致谢
唯一的方法是,在清除画布后重新绘制图像。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.