如何使用光标擦除画布

Question

我想添加一个响应式画布到网页。这只是一个黑色的div，应该可以用光标擦除。

div 1（画布）在div 2（文字）上方。光标应该删除DIV 1和DIV揭示2.

更新

我使用这个代码，但它不工作。

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>

希望有人能帮助！

谢谢

Answer 1

这些变化对你的代码应该创建你的 “刮刮” 的效果：#canvasTop之前

• 移动#text
• 不要使用CSS来改变画布的尺寸。这样做会扭曲画布。
• 设置画布元素的宽度&高度等于＃包装的宽度&高度。

这里被重构代码注释的变化：

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

你的意思是？

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/