HTML+CSS+JavaScript to make a girlfriend version of scratch card (you will learn it once you see it)
|
I believe everyone has played scratch tickets. When I was a kid, as soon as I had money in my pocket, I would call my friends and run to the store near my home. I would hand the owner the crumpled fifty cents with my tender little hands, and scratch the tickets with great anticipation. I had already thought in my mind that if I won 100 yuan, I would buy lots of spicy snacks, cards, spinning tops, and Audi Double Diamond yo-yos... If you read this article carefully, you can use your girlfriend’s beautiful photos to get a scratch card that is unique to you! (Of course, if you don’t have a girlfriend, you can also use the pictures of beautiful women you have collected for many years!) ⛳️Use HTML, CSS and JavaScript to implement scratch cards/scratch lotteryDon't worry, watch the demo first Implementing Scratch Lottery Tickets Using HTML, CSS and JavaScript Step 1: Create the basic structure of the scratch card Step 2: Lay the image on the canvas (as the bottom layer of the scratch card!) Step 3: How to make the scratch card cover Step 4: How to create the words "Please scratch off" on the scratch-off film Step 5: Use JavaScript to activate the scratch card Done—now you can use your own scratch card! Tutorial for beginners: ♥️Don't worry, watch the demo firstScratch Lottery
💎Use HTML, CSS and JavaScript to implement scratch tickets
To do this, first, you have to create an HTML file. 🎉Step 1: Create the basic structure of the scratch cardRegarding the design of this scratch card, this blogger used a very popular technology in the front-end - canvas! Since we are using canvas, we must briefly introduce it - canvas uses JavaScript to draw images on the web page. The drawing canvas area is a rectangular area, and we can control every pixel in it to achieve the effect of drawing whatever we want. This is also the reason why this blogger uses it! If you want to learn canvas in depth, you can read this article - "In order to let my junior sister learn canvas in 20 minutes, I stayed up late and worked hard on this article plus a small project [❤️ Recommended collection ❤️]"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scratch Lottery</title>
<style type="text/css">
#c1{
border: 1px solid blue;
}
</style>
</head>
<body>
<canvas id="c1" width="960" height="1440"></canvas>
</body>
</html>
Demonstration effect:
🎅Step 2: Lay the image on the canvas (as the base of the scratch card!)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scratch Lottery</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 the canvas object var c1 = document.getElementById("c1");
//Step 2: Get the context of canvas var ctx1 = c1.getContext("2d"); //The getContext("2d") object is a built-in HTML5 object with multiple methods for drawing paths, rectangles, circles, characters, and adding images.
//Create an image object var imgs = new Image();
//Specify the image path imgs.src = 'img/girl.jpg'
// Note: Images cannot be placed directly on the canvas. They need to be loaded through the .onload event. Otherwise, the image may not appear on the canvas because it has not been loaded completely. imgs.onload = function(){
// Parameters: image, starting x coordinate, starting y coordinate, the last two parameters specify the size (it is recommended that the size ratio matches the original image ratio)
// If the last two parameters are not specified, the original image will be drawn 1:1 by default, and the content that cannot be displayed will no longer be displayed!
ctx1.drawImage(this,0,0,960,1440)
// Extended usage:
//jb.drawImage(this,200,200,300,300,0,0,1078,1881)
// 200,200,300,300 determines the cropping of the upper left to lower right area of the image; the following four coordinates represent the upper left and lower right coordinates of the drawn area }
</script>
</html>
Demonstration effect:
🎃Step 3: How to make the scratch card cover film
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scratch Lottery</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)
}
// Draw the coating to the top layer (i.e. the covering film) canvas1
ctx1.fillStyle = "lightgray";
ctx1.fillRect(0,0,960,1440);
</script>
</html>
Demonstration effect:
It should be noted that the above code sets the absolute positioning of the canvas of the underlying image of the tiled scratch card, and sets the relative positioning of its parent body tag (this is what is often said in the front end that the parent is relative to the child!) Regarding relative positioning and absolute positioning, let me briefly talk about it (you can understand it):
🎈Step 4: How to make the words "Please scratch off" on the scratch-off filmJust add the following JavaScript code!
//Parameters: normal font/italic font size Microsoft YaHei/FangSong normal: normal font/italic: italic ctx1.font = "normal 80px FangSong";
//Font outline color ctx1.strokeStyle = "slateblue";
//Draw text (hollow) Parameters: text, upper left corner x coordinate, upper left corner y coordinate ctx1.strokeText("Please scratch it!",320,750);
Demonstration effect:
👻Step 5: Use JavaScript to activate the scratch ticket
By the way: This scratch card is designed to continuously clear the covering film of the 50px*50px area where your mouse moves after you click the mouse. No longer cleared when the mouse is unclicked! So - first listen to the mouse click event of the canvas, and when the mouse click event is captured, then listen to the mouse move event. The mouse move event contains a clear function! When the mouse is released, the clearing function will be turned off!
// Listen for the onmousedown event of the canvas (i.e. the mouse click event)
c1.onmousedown = function(ev){
c1.onmousemove = function(e){ //Listen to the onmousemove event of canvas (i.e. mouse movement event)
console.log(e);
var w = 50; // width of clear area var h = 50; // height of clear area var x = e.pageX-c1.offsetLeft - w/2; // x position of clear area var y = e.pageY-c1.offsetTop - h/2; // y position of clear area ctx1.clearRect(x,y,w,h);
}
}
// Listen for the mouse onmouseup event (i.e. mouse release event)
c1.onmouseup = function(ev){
//Cancel onmousemove event c1.onmousemove = null;
}
💝Done——Now you can use the scratch card you designed! 🏄Tutorial for complete beginners:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scratch Lottery</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)
}
// Draw the coating to the top layer (i.e. the covering film) canvas1
ctx1.fillStyle = "lightgray";
ctx1.fillRect(0,0,960,1440);
ctx1.font = "normal 80px Fangsong";
ctx1.strokeStyle = "slateblue";
ctx1.strokeText("Please scratch it!",320,750);
// Listen for the onmousedown event of canvas c1.onmousedown = function(ev){
c1.onmousemove = function(e){
console.log(e);
var w = 50; // width of clear area var h = 50; // height of clear area var x = e.pageX-c1.offsetLeft - w/2; // x position of clear area var y = e.pageY-c1.offsetTop - h/2; // y position of clear area ctx1.clearRect(x,y,w,h);
}
}
c1.onmouseup = function(ev){
//Cancel onmousemove event c1.onmousemove = null;
}
</script>
</html>
If you learned something from this article and liked it, then I am honored. I hope you can share this article with your friends, like and bookmark it, and readers are welcome to discuss technology in the comment section or put forward your sincere opinions. This article ends here. Nice to meet you - I am [孤寒者], a boy who likes computers! 🌹 This is the end of this article about HTML+CSS+JavaScript making a girlfriend version of the scratch card (you can learn it at a glance). For more related HTML+CSS+JavaScript scratch card content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: PostgreSQL materialized view process analysis
>>: Solve the problem of MySql client exiting in seconds (my.ini not found)
Recommend
How to apply TypeScript classes in Vue projects
Table of contents 1. Introduction 2. Use 1. @Comp...
Linux kernel device driver proc file system notes
/***************** * proc file system************...
Detailed explanation of Vue's keyboard events
Table of contents Common key aliases Key without ...
Detailed process of installing various software in Docker under Windows
1. Install MySQL # Download mysql in docker docke...
Summary of the use of CSS scope (style splitting)
1. Use of CSS scope (style division) In Vue, make...
Element sample code to implement dynamic table
Table of contents 【Code background】 【Code Impleme...
How to use SessionStorage and LocalStorage in Javascript
Table of contents Preface Introduction to Session...
How InnoDB implements serialization isolation level
Serialization implementation InnoDB implements se...
MySQL replication mechanism principle explanation
Background Replication is a complete copy of data...
Detailed explanation of JS array methods
Table of contents 1. The original array will be m...
There are text and pictures in the a tag. How to hide the text and only show the picture?
Often you will encounter a style of <a> tag...
Two ways to solve the problem of MySQL master-slave database not being synchronized
Table of contents Two ways to solve the problem o...
Web front-end development experience summary
XML files should be encoded in utf-8 as much as p...
Summary of some related operations of Linux scheduled tasks
I have searched various major websites and tested...
5 ways to determine whether an object is an empty object in JS
1. Convert the json object into a json string, an...