canvas繪制刮刮卡效果

Posted on by

本文實例為大傢分享瞭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" rel="external nofollow" >
 <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>

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：