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)