❤️ Customize your girlfriend's version of scratch music with HTML, CSS and JavaScript ❤️【 At a glance]

Front end small creation The column contains this content
6 articles 17 subscriptions

Scrape musicEveryone must have played. As soon as I had money in my pocket when I was a child, I called my friends and ran to the canteen next to my home. I handed the pinched wrinkled fifty cents to the boss with my tender little hand. I was looking forward to scraping the bought scratch music. I had already thought that I would buy a lot of spicy strips, cards, gyroscopes and Audi double diamond yo yo

After reading this article carefully, you can use yourBeautiful photos of girlfriendRealize a unique scrape music that belongs to you!
Of course, if you don't have a girlfriend, you can also use youBeautiful pictures collected for many years!

♥️ Don't worry, watch the demonstration first

Scrape music

  • 🎯🎯 As you can see in the above video, here I implemented a scratch music with the help of HTML, CSS and JavaScript. 🎯🎯
  • 👑👑 As we all know, scrape music is divided into two layers. The upper layer is the covering film that can be scraped off directly. When you scrape off the covering film, the true face of scrape music will appear, and you will really know whether you won the grand prize or not! 👑👑

💎 Scrape music using HTML, CSS and Javas

  • I hope you will like this design. Below I share a detailed tutorial on how to do this design, with the complete code of the whole design.
  • You can copy and paste directly. But - it's better to teach fish than to teach fish, so I hope my friends can follow my rhythm and learn the steps of the whole design little by little,I believe that in the end, all the partners can independently design your own scrape music!

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

🎉 Step ①: create the basic structure of scratch music

As for the design of this scraping music, the blogger adopts a popular technology in the front end——canvasAchieved!
  since canvas is used, we must briefly introduce it——Canvas uses JavaScript to draw images on Web pages. The painted canvas area is a rectangular area. We can control each pixel to draw whatever we want.This is also the reason why bloggers use it!
  if you want to learn more about canvas, you can read this article——In order to let younger martial sister learn canvas in 20 minutes, I stayed up late and suffered a lot. This article also includes a small project【 ❤️ Suggested collection ❤️】》

  • This HTML code draws the basic structure of this scraping music through canvas. I used some CSS code to display the canvas area (that is, the area where the scratch music is made later).
  • It should be noted that the width and height properties (i.e. width and height) of this canvas should be set according to the size of your picture, otherwise there will be a problem that only some pictures will be displayed later!
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Scrape music</title>
		<style type="text/css">
			#c1{
				border:1px solid blue;
			}
		</style>
	</head>
	<body>
		
		<canvas id="c1" width="nine hundred and sixty" height="one thousand four hundred and forty"></canvas>
		
	</body>
</html>

Demonstration effect:

Insert picture description here

🎅 Step 2: tile the picture on the canvas (as the bottom layer of scraping music!)

  • Because canvas uses JavaScript to draw images on Web pages, all operations on the scratch area (i.e. canvas canvas area) are carried out in JavaScript (although it is said that JavaScript is the most difficult in the front end, I have given detailed comments on all the following JavaScript in the code. If you know the basic JavaScript, I'm sure you'll understand!).
  • Note: at this time, pictures are used in HTML, so you need to create an img folder under the same level directory of this HTML file and put your pictures in it!
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Scrape music</title>
		<style type="text/css">
			#c1{
				border:1px solid blue;
			}
		</style>
	</head>
	<body>
		
		<canvas id="c1" width="nine hundred and sixty" height="one thousand four hundred and forty"></canvas>
		
	</body>
	<script type="text/javascript">
		//Step 1: match to canvas object
		varc1 =document.getElementById("c1");
		//Step 2: get the context of canvas
		varctx1 =c1.getContext("2d");		 //Getcontext ("2D") object is a built-in HTML5 object, which has a variety of drawing paths, rectangles, circles, characters and methods to add images.
		
		//Create a picture object
		varimgs = new Image();
		//Specify picture path
imgs.src = 'img/girl.jpg'
		
		//Note: pictures cannot be directly placed on canvas. They need to be loaded through the event. Onload. Otherwise, pictures may not appear on the canvas because they are not loaded
imgs.onload = function(){
			//Parameters: picture, starting X coordinate and starting y coordinate. The last two parameters specify the size (it is recommended that the scale of the size match the scale of the original drawing)
			//If the latter two parameters are not specified, they will be drawn according to the original figure 1:1 by default, and the contents that cannot be displayed will no longer be displayed!
ctx1.drawImage(this,0,0,nine hundred and sixty,one thousand four hundred and forty)
			
			//Extended use:
			//jb.drawImage(this,200,200,300,300,0,0,1078,1881)
			//200300300 decides to crop the upper left to lower right area of the picture; The last four coordinates represent the upper left and lower right coordinates of the painted area
		}
			
	</script>
</html>

Demonstration effect:
Insert picture description here

🎃 Step ③: how to make the covering film of scrape music

  • As for the covering film of scrape music, the blogger created another canvas and covered it directly above the canvas of the tile picture - which is also in line with the characteristics of scrape music, isn't it!
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Scrape 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="nine hundred and sixty" height="one thousand four hundred and forty"></canvas>
		
		<canvas id="c2" width="nine hundred and sixty" height="one thousand four hundred and forty"></canvas>
		
	</body>
	<script type="text/javascript">
		varc1 =document.getElementById("c1");
		varc2 =document.getElementById("c2");
		
		varctx1 =c1.getContext("2d");
		varctx2 =c2.getContext("2d");
		
		
		//Draw picture to bottom canvas 2
		varimgs = new Image();
imgs.src = 'img/girl.jpg';
imgs.onload = function(){
ctx2.drawImage(this,0,0)
		}
		
		//The coating is drawn to the top layer (i.e. covering film) canvas1
ctx1.fillStyle = "lightgray";
ctx1.fillRect(0,0,nine hundred and sixty,one thousand four hundred and forty);

	</script>
</html>

Demonstration effect:
Insert picture description here

  it should be noted that the above code sets the absolute positioning for the canvas of the bottom picture of the tile scraping music, and sets the relative positioning for its parent label body label (this is the parent-child Jue often said in the front end!)

About relative positioning and absolute positioning, simply pull a few words (understandable):

  • Position: relative -- relative positioning; Position: absolute -- absolute positioning;
  • Generally, the relative is placed in the parent div, and the absolute is placed in the child Div;
  • Absolute positioning is a floating layer. If the position of the parent div above is: relative; If it is deleted, the position of the sub div: absolute; Will go, go, snake skin go!
  • Therefore, when absolute positioning is used, there must be relative positioning in the parent div to prevent the absolute positioning layer from moving!!!

🎈 Step ④: how to make the words "please scrape off" on the scratch film

Just add the following JavaScript code!

	//Parameters: normal font / italic font size Microsoft YaHei / imitation song normal: normal font / Italic: italic
ctx1.font = "Normal 80px imitation Song Dynasty";   
	//Font outline color
ctx1.strokeStyle = "slateblue";	
	//Draw text (empty) parameters: text, upper left corner X coordinate, upper left corner y coordinate
ctx1.strokeText("Please scrape it off!",three hundred and twenty,seven hundred and fifty);

Demonstration effect:
Insert picture description here

👻 Step ⑤: use JavaScript to activate scrape music

  • Above, we designed the whole scraper, but this scraper has no operable function. This means that this scraper can't scrape! You can't even scrape. What's that called scrape music!!!. To this end,We need to use JavaScript to listen for mouse events to activate scratch music.

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

   insert a sentence: the design of this scraper is to continuously remove the covering film of the 50px * 50px area at the moving position of your mouse after you click the mouse. When the mouse cancels clicking, it will not be cleared again!
   therefore - first listen to the mouse click event of canvas. When the mouse click event is captured, then listen to the mouse movement event. The mouse movement event includes the clearing function!
   when the mouse is released, the clearing function will be turned off accordingly!

//Listen for onmousedown event of canvas (i.e. mouse click event)
c1.onmousedown = function(ev){
c1.onmousemove = function(e){		//Listen for onMouseMove event of canvas (i.e. mouse movement event)
console.log(e);
			varw = fifty;			//Width of cleared area
			varh = fifty;			//Height of cleared area
			varx =e.pageX-c1.offsetLeft -w/two;    //Clear the x position of the area
			vary =e.pageY-c1.offsetTop -h/two;		//Clear the Y position of the area
ctx1.clearRect(x,y,w,h);
		}
		}
		//Monitor the onmouseup event of the mouse (i.e. mouse release event)
c1.onmouseup = function(ev){
		//Cancel onMouseMove event
c1.onmousemove = null;
		}

💝 Finished - now you can use this scratch music designed by yourself!

🏄 Tutorial for pure Xiaobai:

  1. Environmental preparation: what environment do you want, no environment! This design is purely front-end implementation, so it doesn't need any environment at all - just have a browser on your computer (I don't believe you don't even have a browser on your computer)!

  2. Create a project folder that I name "scratch music".

  3. Create an "img" folder under the project folder and put your girlfriend / long cherished beauty pictures in it.

  4. Create a "scratch. TXT" text file under the project folder and copy the following code.

  5. Rename the "scratch. TXT" file to "scratch. HTML".

  6. Double click to run!!!

Insert picture description here

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Scrape 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="nine hundred and sixty" height="one thousand four hundred and forty"></canvas>
		
		<canvas id="c2" width="nine hundred and sixty" height="one thousand four hundred and forty"></canvas>
		
	</body>
	<script type="text/javascript">
		varc1 =document.getElementById("c1");
		varc2 =document.getElementById("c2");
		
		varctx1 =c1.getContext("2d");
		varctx2 =c2.getContext("2d");
		
		
		//Draw picture to bottom canvas 2
		varimgs = new Image();
imgs.src = 'img/girl.jpg';
imgs.onload = function(){
ctx2.drawImage(this,0,0)
		}
		
		//The coating is drawn to the top layer (i.e. covering film) canvas1
ctx1.fillStyle = "lightgray";
ctx1.fillRect(0,0,nine hundred and sixty,one thousand four hundred and forty);
		
ctx1.font = "Normal 80px imitation Song Dynasty";   
ctx1.strokeStyle = "slateblue";			
ctx1.strokeText("Please scrape it off!",three hundred and twenty,seven hundred and fifty);
		
		//Listen for onmousedown event of canvas
c1.onmousedown = function(ev){
c1.onmousemove = function(e){
console.log(e);
			varw = fifty;			//Width of cleared area
			varh = fifty;			//Height of cleared area
			varx =e.pageX-c1.offsetLeft -w/two;    //Clear the x position of the area
			vary =e.pageY-c1.offsetTop -h/two;		//Clear the Y position of the area
ctx1.clearRect(x,y,w,h);
		}
		}
c1.onmouseup = function(ev){
		//Cancel onMouseMove event
c1.onmousemove = null;
		}

	</script>
</html>

🌻🌻 If you learn from this article and like it, then I'm honored. I hope you can share this article with your friends, like & & collect this article, and welcome readers to discuss technology in the comment area or put forward your sincere opinions. 🌻🌻

🌹 This article ends here. I'm glad to meet you - I'm the lonely cold, a boy who likes computers! 🌹

emoticon
Insert expression
Relevant recommendations More similar content
©️ 2020 CSDN Skin theme: Code Technology Designer: Amelia_ 0503 Return to home page
Paid inelement
Payment with balance
Click retrieve
Code scanning payment
Wallet balance 0

Deduction Description:

1. The balance is the virtual currency of wallet recharge, and the payment amount is deducted according to the ratio of 1:1.
2. The balance cannot be purchased and downloaded directly. You can buy VIP, c-coin package, paid column and courses.

Balance recharge
shoppingbuy4.com