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 &
    &
 Jackpot4){
     div.innerHTML = Jackpots[1];
 }
    else if(Jackpot>
    3 &
    &
 Jackpot11){
     div.innerHTML = Jackpots[2];
 }
    else if(Jackpot>
    10 &
    &
 Jackpot26){
     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;
    i50;
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>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• canvas实现刮刮卡效果
• 利用HTML5的画布Canvas实现刮刮卡效果
• javascript+canvas实现刮刮卡抽奖效果
• jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
• 手机端js和html5刮刮卡效果
• js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！