[英]How to clear Canvas before drop new image on HTML5?
亲爱的我有一个小的html5 canvas项目,该示例从codepen到使用html5 canvas拖放图像的示例。 示例工作正常,但是一旦放置新图像,我就会遇到问题,然后所有图像区域都重叠。 以下是JavaScript代码
<script>
var imgW;
function drawImg() {
var x = document.getElementById('myCanvas');
var canvax = x.getContext('2d');
var imgElement = document.getElementById('imgCanvas');
var imgObj = new Image();
imgObj.src = imgElement.src;
var imgW = imgObj.width;
var imgH = imgObj.height;
var imgX = canvax.canvas.width * .5 - imgW * .5;
var imgY = canvax.canvas.height * .5 - imgH * .5;
imgObj.onload = function () {
canvax.clearRect(imgX, imgY, imgW, imgH);
canvax.drawImage(imgObj, imgX, imgY, imgW, imgH);
};
}
$(document).ready(function () {
$('.listImg li').draggable({ containment: 'document', opacity: 0.60, revert: false, helper: 'clone',
start: function () {
$('.infoDrag').text('Start Drag');
},
drag: function () {
$('.infoDrag').text('on Dragging');
},
stop: function () {
$('.infoDrag').text('Stop Dragging');
} });
$('#myCanvas').droppable({ hoverClass: 'dashborder', tolerance: 'pointer',
drop: function (ev, ui) {
var droppedItem = $(ui.draggable).clone();
var canvasImg = $(this).find('img');
var newSrc = droppedItem.find('img').attr('src');
canvasImg.attr("src", newSrc);
drawImg();
} });
$('#myCanvas').dblclick(function () {
$('#myCanvas').draggable();
});
});
</script>
我需要在放置新图像之前先清除图像。 我可能需要使用clearRect方法。 但由于尝试了几次,但没有用。 任何建议或指导将不胜感激,谢谢。
代替使用(新加载的)图像的大小和位置作为边界矩形,您提供给clearRect()的是使用画布本身的大小。
只需更改
canvax.clearRect(imgX, imgY, imgW, imgH);
至
canvax.clearRect(0, 0, x.width, x.height);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.