This article shares the specific code for JavaScript to implement scratch cards for your reference. The specific content is as follows
principle
When the mouse is pressed and moved, the scratch effect is achieved, that is, the mouse moves while the mouse is pressed, and then the canvas is cleared. Release the mouse, and the mouse moves no longer clears the canvas, so the event must be cleared.
canvas canvas canvas
1. Get the canvas element
var canvas = ('canvas');
2. Get the drawing object getContext
var ctx = ('2d');
3. Draw lines
= 3;//Line width = 'red';//Line Color//The starting position moveTo(x,y);//The end position lineTo(x,y)//implementstroke()
4. Rectangle (x,y,width,height);
(0,0,300,150); = '#ccc';//Fill color();//Execute(,,20,20);//Clear the rectangle
page
1. Page structure
<canvas width="300" height="150" style="border: 1px solid #ccc;"></canvas> <div class="prize">Thank you Huigu</div>
2. Style
.prize {
width: 300px;
height: 150px;
text-align: center;
line-height: 150px;
margin-top:-150px;
color: red;
font-size: 20px;
}
3. Animation
//Get the canvas element var canvas = ('canvas');
// Get the drawing object var ctx = ('2d');
= 3;//Line width = 'red';//Line Color //The starting position moveTo(x,y); //The end position lineTo(x,y) //Execute stroke()
//rectangle (0,0,300,150);
= '#ccc';//Fill color ();//Execute (,,20,20);
// Press = function (e){
//move = function (e) {
// (,);
// (100,100)
// ();
(,,20,20);//Clear }
}
= function (e) {
= null;
}
// Change the winning information var arr = ['One hundred million','Cash 500','100 yuan phone bill','Tencent Video VIP Monthly Card','Thank you for patronizing'],
prize = ('.prize'),
random = (()*);
= arr[random];
Complete source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*-------------------------------------------------------------/
.prize {
width: 300px;
height: 150px;
text-align: center;
line-height: 150px;
margin-top:-150px;
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<!--jsScratch music-->
<canvas width="300" height="150" style="border: 1px solid #ccc;"></canvas>
<div class="prize">Thank you Huigu</div>
<script>
// ------------------------------------------------------------------------------------------------------------------------------ //Get the canvas element var canvas = ('canvas');
// Get the drawing object var ctx = ('2d');
= 3;//Line width = 'red';//Line Color //The starting position moveTo(x,y); //The end position lineTo(x,y) //Execute stroke()
//rectangle (0,0,300,150);
= '#ccc';//Fill color ();//Execute (,,20,20);
// Press = function (e){
//move = function (e) {
// (,);
// (100,100)
// ();
(,,20,20);//Clear }
}
= function (e) {
= null;
}
// Change the winning information var arr = ['One hundred million','Cash 500','100 yuan phone bill','Tencent Video VIP Monthly Card','Thank you for patronizing'],
prize = ('.prize'),
random = (()*);
= arr[random];
// ------------------------------------------------------------------------------------------------------------------------------</script>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.