canvas入门--绘制刮刮卡

1、html代码

 <div class="jpk" id="jpk">
    <div class="jp" id="jp">谢谢惠顾</div>
    <canvas id="canvasFirst" width="600" height="200"></canvas>
 </div>

2、css样式

.jpk {
    height: 200px;
    width: 600px;
    position: relative;
    border: 1px solid darkgray;
    .jp {
      height: 200px;
      width: 600px;
      position: absolute;
      top: 0;
      left: 0;
      font-size: 40px;
      color: deeppink;
      line-height: 200px;
      text-align: center;
      user-select: none;
    }
    #canvasFirst {
      position: absolute;
      top: 0;
      left: 0;
    }
}

3、JavaScript代码

    // 1、找到画布对象
    var canvasFirst = document.getElementById("canvasFirst");
    var jpk = document.getElementById("jpk");
    var jp = document.getElementById("jp");
    // 2、上下文对象（画笔）
    var ctx = canvasFirst.getContext("2d");

    ctx.fillStyle = "darkgray";
    ctx.fillRect(0, 0, 600, 200);
    ctx.font = "20px 微软雅黑";
    ctx.fillStyle = "#fff";
    ctx.fillText("刮刮卡", 260, 100);

    var isClick = false;
    canvasFirst.onmousedown = function () {
      isClick = true;
    };
    canvasFirst.onmousemove = function (e) {
      if (isClick) {
        var x = e.pageX - jpk.offsetLeft;
        var y = e.pageY - jpk.offsetTop;
        ctx.globalCompositeOperation = "destination-out";//隐藏原图层，显示目标图层
        ctx.arc(x, y, 20, 0, 2 * Math.PI);
        ctx.fill();
      }
    };
    canvasFirst.onmouseup = function () {
      isClick = false;
    };

    var jpList = [
      {
        content: "一等奖:iphone13 1TB",
        gl: 0.1,
      },
      {
        content: "二等奖:iphoneX",
        gl: 0.2,
      },
      {
        content: "三等奖:iPad",
        gl: 0.3,
      },
    ];
    
    //随机奖品
    var randomNum = Math.random();
    if (randomNum < jpList[0].gl) {
      jp.innerHTML = jpList[0].content;
    } else if (randomNum < jpList[0].gl + jpList[1].gl) {
      jp.innerHTML = jpList[1].content;
    } else if (randomNum < jpList[0].gl + jpList[1].gl + jpList[2].gl) {
      jp.innerHTML = jpList[2].content;
    }

4、效果