<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
.img {
width: 100%;
height: 100%;
background-color: blanchedalmond;
}
.img {
background: url("./images/9.jpg") no-repeat center/contain;
}
#canvas {
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="400">
您的浏览器不支持canvas，请更换浏览器
</canvas>
<div class="img"></div>
<script>
window.onload = function () {
if (canvas.getContext) {
canvas.width = document.documentElement.clientWidth
canvas.height = document.documentElement.clientHeight
const ctx = canvas.getContext('2d')
const image = new Image()
image.src = './images/2.jpg'
image.onload = function () {
draw()
}
ctx.lineCap = 'round'
ctx.lineWidth = 40
canvas.addEventListener('touchstart', (event) => {
const x = event.changedTouches[0].clientX
const y = event.changedTouches[0].clientY
ctx.beginPath()
ctx.save()
ctx.globalCompositeOperation = 'destination-out'
ctx.lineTo(x, y)
ctx.stroke()
ctx.restore()
})
canvas.addEventListener('touchmove', (event) => {
const x = event.changedTouches[0].clientX
const y = event.changedTouches[0].clientY
ctx.save()
ctx.globalCompositeOperation = 'destination-out'
ctx.lineTo(x, y)
ctx.stroke()
ctx.restore()
})
canvas.addEventListener('touchend', event => {
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
const allPixel = imageData.data
let transparentPixel = 0
for (let i = 0; i < allPixel.length / 4; i++) {
if (allPixel[4 * i + 3] === 0) {
transparentPixel++
}
}
if (transparentPixel * 4 >= allPixel.length / 3) {
canvas.style.transition = "all 2s"
canvas.style.opacity = 0
setTimeout(() => {
canvas.style.display = 'none'
}, 2000);
}
})
function draw() {
ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
}
}
}
</script>
</body>
</html>