如何用鼠标擦除包含文本的画布

Question

我正在使用以下代码用鼠标擦除画布并显示图像。

我想在画布上添加一个徽标和一些文本。当用户将鼠标悬停在画布（红色层）上时，他们也会擦除文本。

我不确定我应该添加什么代码来实现这一点。

希望任何人都可以提供帮助！

var canvas = document.getElementById("canvasTop");
// set the canvas element's width/height to cover #wrapper
var wrapper=document.getElementById('wrapper');
var wrapperStyle=window.getComputedStyle(wrapper,null);
canvas.width=parseInt(wrapperStyle.getPropertyValue("width"));
canvas.height=parseInt(wrapperStyle.getPropertyValue("height"));
//
var ctx = canvas.getContext("2d");

    ctx.lineWidth = 20;
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    // set "erase" compositing once at start of app for better performance
    ctx.globalCompositeOperation = "destination-out";

var canvasOffset = $("#canvasTop").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;

var startX;
var startY;
var isDown = false;

function handleMouseDown(e) {
    e.preventDefault();
    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);
    isDown = true;
}

function handleMouseUp(e) {
    e.preventDefault();
    isDown = false;
}

function handleMouseOut(e) {
    e.preventDefault();
    isDown = false;
}



function handleMouseMove(e) {
    if (!isDown) {
        return;
    }
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    // Put your mousemove stuff here
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(mouseX, mouseY);
    ctx.stroke();
    startX = mouseX;
    startY = mouseY;
}

$("#canvasTop").mousedown(function (e) {
    handleMouseDown(e);
});
$("#canvasTop").mousemove(function (e) {
    handleMouseMove(e);
});
$("#canvasTop").mouseup(function (e) {
    handleMouseUp(e);
});
$("#canvasTop").mouseout(function (e) {
    handleMouseOut(e);
});

html, body {height:100%}
body { margin:0; padding:0; overflow:hidden; cursor:default;}
#wrapper {
  position:relative; 
  margin:auto; 
  width:100%; 
  height:100%; 
}

#wrapper-image { position:absolute; top:0; left:0; width:100%; height:100%; background: url('http://i43.tinypic.com/2iuvpf.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

#canvasTop {
  position:absolute; 
  top:0px; 
  left:0px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="wrapper">
  <div id="wrapper-image"></div>
 </div>
 <canvas id="canvasTop" width=512 height=512></canvas>

Answer 1

在画布上加载和绘制图像

var image = new Image();
img.src="imageURL";
image.onload = function(){
    ctx.drawImage(this,0,0);
};

假设在您加载图像时已为 ctx 分配了 2D 上下文。这将在左上角绘制图像，您可能需要对其进行缩放和居中。

要确定鼠标是否没有移动（悬停），只需使用setTimeout 从 mousemove 事件侦听器内部调用擦除函数。 setTimeout 返回一个句柄，您需要在创建新句柄之前通过使用超时句柄调用 clearTimeout 来清除当前超时。这样，当用户悬停任何时间时，都会调用 clear 函数。如果鼠标移出画布元素，请不要忘记清除超时，否则当鼠标不在画布上时会发生当前超时

有关如何使用 setTimeout 的信息MDN setTimeout