Comment faire pour effacer une toile contenant du texte avec la souris

Question

J'utilise le code suivant pour effacer une toile avec la souris et révéler une image.

Je voudrais ajouter un logo et du texte sur la toile. Lorsque l'utilisateur survole la toile (le calque rouge), il efface également le texte.

Je ne suis pas sûr du code que je devrais ajouter pour y parvenir.

J'espère que n'importe qui peut aider!

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

Pour charger et dessiner une image sur la toile

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

En supposant que CTX a été attribué un contexte 2D au moment de charger l'image. Cela va dessiner l'image dans le coin supérieur gauche, vous devrez peut-être l'échelle et le centre. Pour savoir si la souris n'a pas bougé (plané), utilisez setTimeout pour appeler la fonction d'effacement depuis l'écouteur d'événement mousemove. setTimeout renvoie un handle, vous devez effacer le délai d'attente actuel en appelant clearTimeout avec le handle de délai avant d'en créer un nouveau. De cette façon, lorsque l'utilisateur survole à tout moment, la fonction d'effacement sera appelée. Ne pas oublier d'effacer le délai d'attente si la souris se déplace hors de l'élément de toile ou le délai d'attente actuel se produira lorsque la souris est pas sur la toile

Pour plus d'informations sur l'utilisation de setTimeout MDN setTimeout