canvas绘制刮刮卡效果

这篇文章主要为大家详细介绍了canvas绘制刮刮卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了canvas绘制刮刮卡效果的具体代码，供大家参考，具体内容如下

先上图

canvas绘制刮刮卡效果

代码

				?

									<!DOCTYPE html>

									<html>

									<head>

									 <meta name="keywords" content="风舞红枫,前端技术,canvas"/>

									 <meta name="description" content="风舞红枫,前端技术,canvas,vue,react,node,个人博客"/>

									 <meta charset="utf-8">

									 <title>刮刮卡</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 = ["一等奖","二等奖","三等奖","四等奖","奖励奖"];

									 //一等奖概率2% 二等奖概率6% 三等奖概率14% 四等奖概率30% 奖励奖概率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("刮刮卡", 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();

									 }

									 }

									 //随机n到m的一个整数

									 function rand(n,m){

									 var c = m - n + 1;

									 return Math.floor(Math.random() * c + n);

									 }

									</script>

									</html>