<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Canvas scratch game</title>
<style>* {margin: 0;
padding: 0;
}
.prize {
position: absolute;
width: 300px;
height: 150px;
text-align: center;
line-height: 150px;
font-size: 30px;
color: red;
}
#canvas{
border: 1px solid # 000;
position: absolute;
z-index: 2;
}
</style>
<script >
window.onload = function(){
var flag = false; // Is dragging
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d"); // Draw a graph
// Draw a rectangle
ctx.beginPath(); // Start path
ctx.rect(0.0.300.150); // Draw a rectangle fillRect solid strokeRect hollow, with only borders
ctx.fillStyle='#c0c0c0';// Fill the color
ctx.fill(); / / fill
ctx.closePath(); // Close the path
// Press event
canvas.onmousedown = function(event){ //event Specifies the event status of the object
flag = true;
};
// Move the event
canvas.onmousemove = function(event){
if(! flag) {return;
}
var x = event.clientX; // The distance from the X-axis
var y = event.clientY; // The distance from the Y-axis
// Clear the drawing
ctx.clearRect(x,y,20.20);
}
// Release event
canvas.onmouseup= function(event){ //event Specifies the event status of the object
flag = false;
};
// Winning information
var arr = ['A hundred million'.'Seascape Villa'.'First Prize'.'Second prize'.'100 yuan call fee '.'10 g flow'.'Thank you for coming.'];
var prize = document.querySelector(".prize");
var i = Math.floor(Math.random()*arr.length); // Random number parseInt
console.log(i);
prize.innerText = arr[i]; / / 0 to 5
}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="150"></canvas>
<div class="prize">Thank you for your help</div>
</body>
</html>
Copy the code