成都网站建设设计

将想法与焦点和您一起共享

使用canvas怎么绘制一个刮刮卡效果-创新互联

使用canvas怎么绘制一个刮刮卡效果?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

成都网站设计、成都网站制作中从网站色彩、结构布局、栏目设置、关键词群组等细微处着手,突出企业的产品/服务/品牌,帮助企业锁定精准用户,提高在线咨询和转化,使成都网站营销成为有效果、有回报的无锡营销推广。成都创新互联专业成都网站建设十载了,客户满意度97.8%,欢迎成都创新互联客户联系。

代码





 
 
 
 刮刮卡
 
 
 *{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);}
 


 
   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);  }

关于使用canvas怎么绘制一个刮刮卡效果问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


当前文章:使用canvas怎么绘制一个刮刮卡效果-创新互联
标题来源:http://chengdu.cdxwcx.cn/article/djeodh.html