Canvas draws scratch card effect

Canvas draws scratch card effect

This article shares the specific code for drawing the scratch card effect with canvas for your reference. The specific content is as follows

First picture

Code

<!DOCTYPE html>
<html>
<head>
 <meta name="keywords" content="Feng Wu Hong Feng, front-end technology, canvas"/>
 <meta name="description" content="Fengwu Hongfeng, front-end technology, canvas, vue, react, node, personal blog"/>
 <meta charset="utf-8">
 <title>Scratch Card</title>
 <link rel="icon" href="../image/icon2.ico" >
 <style type="text/css">
 *{margin:0;padding:0;}
 html,body{height:100%;}
 body{overflow:hidden;}
 div{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:300px;height:150px;text-align:center;line-height:150px;background:rgb(200,0,0);color:rgb(255,255,255);font-size:22px;}
 canvas{display: block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;filter:blur(0.7px);}
 </style>
</head>
<body>
 <div></div>
 <canvas></canvas>
</body>
<script type="text/javascript">
 var div = document.getElementsByTagName('div')[0];
 var canvas = document.getElementsByTagName('canvas')[0];
 var context = canvas.getContext("2d");

 var Jackpots = ["First Prize","Second Prize","Third Prize","Fourth Prize","Bonus Prize"];
 //First prize probability 2% Second prize probability 6% Third prize probability 14% Fourth prize probability 30% Bonus prize probability 48%
 var Jackpot = rand(0,49);
 if(Jackpot == 0){
 div.innerHTML = Jackpots[0];
 }else if(Jackpot>0 && Jackpot<4){
 div.innerHTML = Jackpots[1];
 }else if(Jackpot>3 && Jackpot<11){
 div.innerHTML = Jackpots[2];
 }else if(Jackpot>10 && Jackpot<26){
 div.innerHTML = Jackpots[3];
 }else{
 div.innerHTML = Jackpots[4];
 }

 context.beginPath();
 context.fillStyle = "rgb(200,200,200)"
 context.moveTo(0,0);
 context.lineTo(300,0);
 context.lineTo(300,150);
 context.lineTo(0,150);
 context.lineTo(0,0);
 context.fill();
 context.closePath();

 context.beginPath();
 context.font = '30px Arial';
 context.fillStyle = "rgb(255,255,255)"
 context.fillText("Scratch Card", 110, 90);
 context.fill();
 context.closePath();
 
 var fillColor = ["rgb(255,0,0,0.8)","rgb(255,255,0,0.8)","rgb(255,0,255,0.8)","rgb(0,255,255,0.8)"];
 for(var i = 0;i<50;i++){
 context.beginPath();
 context.fillStyle = fillColor[rand(0,3)];
 context.arc(rand(20,280),rand(20,130),1,0,2*Math.PI);
 context.fill();
 context.closePath();
 }

 var flag = false;
 canvas.onmousedown = function(){
 flag = true;
 }

 canvas.onmouseup = function(){
 flag = false;
 }

 canvas.onmousemove = function(){
 if(flag){
 var e = event || window.event;
 var x = e.clientX - parseInt(div.offsetLeft);
 var y = e.clientY - parseInt(div.offsetTop);
 //console.log(x,y);

 context.beginPath();
 context.arc(x,y,20,0,2*Math.PI);
 context.globalCompositeOperation="destination-out";
 context.fill();
 context.closePath();
 }
 }

 //A random integer from n to m function rand(n,m){
 var c = m - n + 1;
 return Math.floor(Math.random() * c + n);
 }
</script>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Canvas achieves scratch card effect
  • Using HTML5 Canvas to achieve scratch card effect
  • JavaScript+canvas to achieve scratch card lottery effect
  • jQuery uses eraser.js plug-in to achieve the effect of erasing and scratching cards [with eraser.js download]
  • Mobile js and html5 scratch card effects
  • js and html5 realize the mobile scratch card lottery effect, perfect compatibility with android/IOS

<<:  Detailed tutorial on setting password for MySQL free installation version

>>:  mysql5.7.18.zip Installation-free version configuration tutorial (windows)

Recommend

Detailed explanation of the configuration method of MySQL master-slave replication read-write separation

1. Description Earlier we talked about the instal...

arcgis.js controls the display range of the map body to automatically bounce back when it exceeds the area (implementation ideas)

Table of contents background Effect Ideas backgro...

Detailed explanation of MySQL partition table

Preface: Partitioning is a table design pattern. ...

Ubuntu 20.04 connects to wifi (2 methods)

I recently installed Ubuntu 20.04 and found that ...

Let's learn about the MySQL storage engine

Table of contents Preface 1. MySQL main storage e...

Steps to split and compress CSS with webpack and import it with link

Let's take a look at the code file structure ...

Implementation of iview permission management

Table of contents iview-admin2.0 built-in permiss...

Pure JS method to export table to excel

html <div > <button type="button&qu...

Use elasticsearch to delete index data regularly

1. Sometimes we use ES Due to limited resources o...

How to prevent hyperlink redirection using JavaScript (multiple ways of writing)

Through JavaScript, we can prevent hyperlinks fro...

CSS HACK for IE6/IE7/IE8/IE9/FF (summary)

Since I installed the official version of IE8.0, ...

A practical record of handling the ddgs and qW3xT.2 mining viruses implanted in Linux servers

Preface With the crazy speculation of virtual cur...

The difference between ID and Name attributes of HTML elements

Today I am a little confused about <a href=&quo...

Reference SVG images in CSS to support dynamic color switching implementation code

When we add an svg image to display, react prompt...

Creating Responsive Emails with Vue.js and MJML

MJML is a modern email tool that enables develope...