Comment effacer le canevas à l'aide du curseur

Question

Je souhaite ajouter un canevas réactif à une page Web. Ceci est juste un div noir et devrait être effaçable avec le curseur.

Div 1 (canevas) au-dessus de div 2 (texte). Le curseur doit effacer div 1 et révéler div 2.

Mise à jour

J'utilise ce code, mais il ne fonctionne pas.

var canvas = document.getElementById("canvasTop"); 
 
var ctx = canvas.getContext("2d"); 
 
    ctx.lineWidth = 10; 
 
    ctx.lineCap = "round"; 
 
    ctx.lineJoin = "round"; 
 
    ctx.fillStyle = "skyblue"; 
 
    ctx.fillRect(0, 0, canvas.width, canvas.height); 
 

 
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.save(); 
 
    ctx.globalCompositeOperation = "destination-out"; 
 
    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; 
 
} 
 
#wrapper { 
 
    position:relative; 
 
    margin:auto; 
 
    width:100%; 
 
    height:100%; 
 
    background-color:#ffffff 
 
} 
 
#canvasTop { 
 
    position:absolute; 
 
    top:0px; 
 
    left:0px; 
 
    width:100%; 
 
    height:100%; 
 
} 
 
#text { 
 
    position:absolute; 
 
    left:0; 
 
    right:0; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    width:400px; 
 
    height:200px; 
 
    text-align:center; 
 
    top: 50%; 
 
    transform:translateY(-50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <canvas id="canvasTop" width=100% height=100%></canvas> 
 
    <div id="text"> 
 
    <p> Text Text Text Text Text Text Text Text Text</p> 
 
    <p> Text Text Text Text Text Text</p> 
 
    <p> Text Text Text Text Text Text</p> 
 
    <p> Text Text Text Text Text Text Text Text Text</p> 
 
    </div> 
 
</div>

quelqu'un l'espoir peut vous aider!

Merci

Answer 1

Ces modifications à votre code devraient créer votre "gratter" effet:

• #text Déplacer avant #canvasTop
• Ne pas utiliser les CSS pour changer la taille de la toile. Cela faussera la toile.
• Définir la largeur de l'élément de canevas & hauteur égale à la largeur de l'enveloppe & hauteur.

Voici le code avec les modifications remaniée avec annotées:

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 = 10; 
 
    ctx.lineCap = "round"; 
 
    ctx.lineJoin = "round"; 
 
    ctx.fillStyle = "skyblue"; 
 
    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; } 
 
#wrapper { 
 
    position:relative; 
 
    margin:auto; 
 
    width:100%; 
 
    height:100%; 
 
    background-color:#ffffff; 
 
} 
 
#canvasTop { 
 
    position:absolute; 
 
    top:0px; 
 
    left:0px; 
 
} 
 
#text { 
 
    position:absolute; 
 
    left:0; 
 
    right:0; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    width:400px; 
 
    height:200px; 
 
    text-align:center; 
 
    top: 50%; 
 
    transform:translateY(-50%); 
 
} 
 
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Drag the mouse over center to "scratch-off" reveal</h4> 
 
<div id="wrapper"> 
 
    <!-- move #text before #canvasTop --> 
 
    <div id="text"> 
 
    <p> Text Text Text Text Text Text Text Text Text</p> 
 
    <p> Text Text Text Text Text Text</p> 
 
    <p> Text Text Text Text Text Text</p> 
 
    <p> Text Text Text Text Text Text Text Text Text</p> 
 
    </div> 
 
    <canvas id="canvasTop" width=512 height=512></canvas> 
 
</div>

Answer 2

Voulez-vous dire cela?

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
ctx.fillRect(0, 0, 100, 100); 
ctx.canvas.addEventListener('mousedown', function(evt) { 
    document.getElementById('canvas').remove(); 
}, false); 

https://jsfiddle.net/mansim/krzpc1wd/