This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Scratch we all played, when I was a child in a rich, he began to cry out on a friend excitedly ran home next to a store, using the immature to hand to the boss that is kneaded crumpled five hair moneys, eyeful bought from blowing to scratch music, good heart already think of more than $100 bills to buy a lot of spicy dry tofu, CARDS, gyro, audi double drill the yo-yo…

After reading this article, you can create your own scratch-off with your girlfriend’s beautiful photos.

(Of course, if you don’t have a girlfriend, you can also use pictures of beautiful women you’ve been saving for years!)

♥️ Don’t worry, watch the demo first

B standing video link on this — player.bilibili.com/player.html…

  • 🎯🎯 As you can see in the video above, here I implemented a scratch-off with HTML, CSS, and JavaScript. 🎯 🎯
  • 👑👑 As we all know, scratch-off is divided into two layers, the top layer can be directly scraped off the cover film, when you scrape off the cover film, scratch-off the real face will be revealed, you will really know whether you hit the jackpot! 👑 👑

💎 implements scratch-off using HTML, CSS, and JavaS

  • I hope you like this design. I’ve shared a detailed tutorial below on how I went about doing this, along with the complete code for the entire design.
  • You can just copy and paste it. However, it is better to teach a fish than to teach a fish, so I hope friends can follow my rhythm, a little bit of learning the whole design of each step, I believe that to see the end, friends can independently design their own scratch-off oh!

To do this, you must first create an HTML file.

🎉 Step 1: Create the basic structure of scratch-off

About this scratch-off music design, this blogger is using the front end is currently very popular in a big technology – Canvas implementation! Now that I’m using Canvas, I’m sure I need a brief introduction to it — Canvas uses JavaScript to draw images on web pages. The canvas area is a rectangular area in which we can control each pixel to achieve the effect of drawing whatever we want. That’s why this blogger uses it!

  • This HTML code draws the basic structure of the scratch-off game on the canvas. I used some CSS code to make the Canvas canvas area appear (the scratch-off area later).
  • Note that the width and height properties of this canvas should be set according to the size of your image, otherwise it will only show part of the image!
<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Scratch music</title>
		<style type="text/css">
			#c1{
				border: 1px solid blue;
			}
		</style>
	</head>
	<body>
		
		<canvas id="c1" width="960" height="1440"></canvas>
		
	</body>
</html>
Copy the code

Demo effect:

🎅 Step 2: Lay the picture flat on the canvas canvas (as the base of scratch-off!)

  • Canvas uses JavaScript to draw images on web pages, so all operations on scratch area (canvas canvas area) are carried out in JavaScript (although it is said that JavaScript is the most difficult in the front-end, all the following JavaScript, I have detailed comments in the code, if you know basic JavaScript, I’m sure you’ll understand! .
  • Note: you are using images in your HTML, so create an IMG folder in the same directory as your HTML file and put your images in it!
<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Scratch music</title>
		<style type="text/css">
			#c1{
				border: 1px solid blue;
			}
		</style>
	</head>
	<body>
		
		<canvas id="c1" width="960" height="1440"></canvas>
		
	</body>
	<script type="text/javascript">
		// Step 1: match to canvas
		var c1 = document.getElementById("c1");
		// Step 2: Get the canvas context
		var ctx1 = c1.getContext("2d");		
		
		var  imgs = new Image();
		imgs.src = 'img/girl.jpg'
		
		// Note: the image cannot be placed directly on the canvas, it needs to be loaded via the.onload event, otherwise the image may not appear on the canvas due to incomplete loading
		imgs.onload = function(){
			// Parameters: image, start x coordinate, start Y coordinate, the last two parameters specify the size (the scale of the proposed size matches that of the original image)
			// If the last two parameters are not specified, the original picture will be drawn 1:1 by default.
			ctx1.drawImage(this.0.0.960.1440)
			
			// extend the use of:
			/ / jb. DrawImage (this, 200200300300,0,0,1078,1881)
			// 200,200,300,300 Decide to crop the image from top left to bottom right; The last four coordinates represent the upper left and lower right coordinates of the region to be drawn
		}
			
	</script>
</html>
Copy the code

Demo effect:

🎃 step 3: how to make scratch-off film cover

  • As for the scratch-off covering film, the blogger created another canvas and covered it directly above the tiled canvas – this is also in line with the characteristics of scratch-off, isn’t it?
<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Scratch music</title>
		<style type="text/css">
			#c1{
				border: 1px solid blue;
				position: absolute;
			}
			
			#c2{
				border: 1px solid red;
			}
			
			body{
				position: relative;
			}
		</style>
	</head>
	<body>
		
		<canvas id="c1" width="960" height="1440"></canvas>
		
		<canvas id="c2" width="960" height="1440"></canvas>
		
	</body>
	<script type="text/javascript">
		var c1 = document.getElementById("c1");
		var c2 = document.getElementById("c2");
		
		var ctx1 = c1.getContext("2d");
		var ctx2 = c2.getContext("2d");
		
		
		// Draw the image to the underlying canvas2
		var imgs = new Image();
		imgs.src = 'img/girl.jpg';
		imgs.onload = function(){
			ctx2.drawImage(this.0.0)}// The coating is drawn to the top layer (the covering film) canvas1
		ctx1.fillStyle = "lightgray";
		ctx1.fillRect(0.0.960.1440);

	</script>
</html>
Copy the code

Demo effect:

Note that this code sets the absolute position of the canvas of the tiled scratch-off image and the relative position of its parent tag, the body tag.

There are relative positioning and absolute positioning, simple pull a few words (understandable) :

  • Position :relative — relative position Position :absolute – absolute position;
  • Usually relative to the parent div, absolutely in the child div;
  • Absolute position is a floating layer, if the parent div position:relative; Position: Absolute; It moves, moves, snakeskin moves!
  • So use absolute positioning, then the parent div must have relative positioning, this prevents the absolute positioning layer to go!!

🎈 step 4: how to make scratch-off cover film on the “please scratch off” words

Just add the following JavaScript code!

	// Parameters: normal font /italic Microsoft Yahei/Song Normal: normal font /italic: italic
	ctx1.font = "Normal 80px Imitation song";   
	// Font outline color
	ctx1.strokeStyle = "slateblue";	
	// Draw text (hollow) parameters: text, top left x coordinates, top left y coordinates
	ctx1.strokeText("Scrape it, please!.320.750);
Copy the code

Demo effect:

👻 Step 5: Use JavaScript to activate scratch-off

  • Above we designed the whole scratch-off, but the scratch-off didn’t have any operational features yet. That means this scratch-off it can’t scratch-off! Scrape can’t scrape, that return call what scrape happy!! . To do this, we need to use JavaScript to listen for mouse events to activate the scratch-off.

  • Using the JavaScript below, I have given detailed comments in the code. If you know basic JavaScript, you will definitely understand it.

Note: This scratch-off design is designed to continuously clear the 50px by 50px area of your mouse movement after you click on it. When the mouse is cancelled after clicking no longer clear! So — first listen for the mouse click event of canvas, and then listen for the mouse movement event after capturing the mouse click event. The mouse movement event includes the clear function! When the mouse is released, the corresponding close to clear the function!

// Listen for the canvas onmousedown event
		c1.onmousedown = function(ev){
		c1.onmousemove = function(e){		
			console.log(e);
			var w = 50;			
			var h = 50;			
			var x = e.pageX-c1.offsetLeft - w/2;   
			var y = e.pageY-c1.offsetTop - h/2;		
			ctx1.clearRect(x,y,w,h);
		}
		}
		c1.onmouseup = function(ev){
		c1.onmousemove = null;
		}
Copy the code

💝 complete – now you can use this scratch-off game of your own design!

🏄 for pure white tutorial:

  1. Environment preparation: what environment, no environment! The design of pure front-end implementation, so do not need any environment – just need you have a browser on your computer (I do not believe you even have a browser on your computer)!

  2. Create a project folder I’ll call “Scratch-offs”.

  3. Create an “IMG” folder under your project folder and put your girlfriend/long-cherished beautiful girl pictures in it.

  4. Create a “scratch.txt” text file in your project folder and copy the following code into it.

  5. Rename the scratch.txt file to scratch.html.

  6. Double click to run!!

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Scratch music</title>
		<style type="text/css">
			#c1{
				border: 1px solid blue;
				position: absolute;
			}
			
			#c2{
				border: 1px solid red;
			}
			
			body{
				position: relative;
			}
		</style>
	</head>
	<body>
		
		<canvas id="c1" width="960" height="1440"></canvas>
		
		<canvas id="c2" width="960" height="1440"></canvas>
		
	</body>
	<script type="text/javascript">
		var c1 = document.getElementById("c1");
		var c2 = document.getElementById("c2");
		
		var ctx1 = c1.getContext("2d");
		var ctx2 = c2.getContext("2d");
		
		
		// Draw the image to the underlying canvas2
		var imgs = new Image();
		imgs.src = 'img/girl.jpg';
		imgs.onload = function(){
			ctx2.drawImage(this.0.0)}// The coating is drawn to the top layer (the covering film) canvas1
		ctx1.fillStyle = "lightgray";
		ctx1.fillRect(0.0.960.1440);
		
		ctx1.font = "Normal 80px Imitation song";   
		ctx1.strokeStyle = "slateblue";			
		ctx1.strokeText("Scrape it, please!.320.750);
		
		// Listen for the canvas onmousedown event
		c1.onmousedown = function(ev){
		c1.onmousemove = function(e){
			console.log(e);
			var w = 50;			
			var h = 50;			
			var x = e.pageX-c1.offsetLeft - w/2;   
			var y = e.pageY-c1.offsetTop - h/2;		
			ctx1.clearRect(x,y,w,h);
		}
		}
		c1.onmouseup = function(ev){
		c1.onmousemove = null;
		}

	</script>
</html>
Copy the code

🌻🌻 If you have learned something from this article and enjoyed it, then I am honored. Please share this article with your friends, like && bookmark it, and feel free to discuss the technology in the comments section, or give us your sincere opinion. 🌻 🌻

🌹 end of this article, very happy to meet you – I am [lonely], a boy like computer! 🌹