Realization of Scratch Award Function by js+canvas
- 2021-08-21 19:31:37
- OfStack
In this paper, we share the specific code of js+canvas to realize scratch award for your reference. The specific contents are as follows
1. The scratch award effect at PC end is realized
2. Using canvas text, pixel operation, synthesis, drawing graphics, random numbers
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Scratch award </title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
background: #00BFFF;
}
#prize {
width: 300px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -150px;
background: #fff;
font-family: " Microsoft Yahei ";
font-size: 40px;
text-align: center;
line-height: 100px;
-webkit-user-select: none;
}
#myCanvas {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -150px;
}
</style>
</head>
<body>
<div class="box">
<div id="prize"></div>
<canvas id="myCanvas" width="300" height="100"></canvas>
</div>
</body>
<script type="text/javascript">
// Get an object
var textArr = ["1 Wait for a prize ", "2 Wait for a prize ", "3 Wait for a prize ", " Thank you for your patronage ", " Come again 1 Times "];
var prize = document.getElementById("prize");
var num = Math.random() * 100;
if (num <= 60) {
prize.innerText = textArr[3];
} else if (num <= 70) {
prize.innerText = textArr[4];
} else if (num <= 80) {
prize.innerText = textArr[2];
} else if (num <= 90) {
prize.innerText = textArr[1];
} else if (num <= 100) {
prize.innerText = textArr[0];
}
var myCanvas = document.getElementById("myCanvas");
// Build an environment
var cxt = myCanvas.getContext("2d");
cxt.globalAlpha = 1;
cxt.fillStyle = "#ccc";
cxt.fillRect(0, 0, 300, 100);
var txt = " Scratch award ";
cxt.fillStyle = "#000";
cxt.font = "30px Microsoft Yahei ";
cxt.textAlign = "center";
cxt.textBaseline = "middle";
cxt.fillText(txt, 150, 50, 300);
var mX, mY;
var flag = false;
myCanvas.onmousedown = function(e) {
flag = true;
mX = e.offsetX;
mY = e.offsetY;
drawArc(mX, mY);
}
document.body.onmousemove = function(e) {
if (flag == true) {
mX = e.offsetX;
mY = e.offsetY;
drawArc(mX, mY);
}
}
document.body.onmouseup = function() {
flag = false;
sayPrize();
}
function drawArc(x, y) {
cxt.globalCompositeOperation = "destination-out"; // Intersections are not displayed
cxt.beginPath();
cxt.fillStyle = "white";
cxt.moveTo(x, y);
cxt.arc(x, y, 10, 0, 2 * Math.PI);
cxt.fill();
}
function sayPrize() {
var myImg = cxt.getImageData(70, 30, 160, 40);
// var myImg = cxt.getImageData(93, 37, 40, 30);
// Set the color of pixels
var num = 0;
var max = myImg.data.length / 4;
for (var i = 0; i < myImg.data.length; i += 4) {
if (myImg.data[i + 3] <= 200) {
num++;
}
}
//2/3*myImg.data.length/4
if (num >= max * 0.6) {
alert(" Congratulations , Obtain: " + prize.innerText);
}
}
</script>
</html>