Как стереть холст с текстом с помощью мыши

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 с помощью дескриптора тайм-аута, прежде чем вы создадите новый. Таким образом, когда пользователь навешивается на какое-то время, будет вызываться понятная функция. Не забудьте очистить тайм-аут, если мышь перемещается из элемента холста или текущего тайм-аута будет происходить, когда мышь не находится над холстом

Для получения информации о том, как использовать SetTimeout MDN setTimeout