2021-01-20-CSDN博客

本文链接：https://blog.csdn.net/qq_45688556/article/details/112890117

本文介绍了一个利用HTML5 Canvas元素和globalCompositeOperation属性创建刮刮卡效果的案例。通过设置不同属性值，实现在用户鼠标移动时清除指定区域的内容，模拟刮开覆盖层，最终显示隐藏信息。案例中还包含了一个随机展示奖项的简单功能。

摘要由CSDN通过智能技术生成

canvas制作刮刮卡案例

用到的方法 globalCompositeOperation

globalCompositeOperation定义和用法

globalCompositeOperation属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上。

源图像=您打算放置到画布上的绘图

目标图像=您已经放置在画布上的绘图

JavaScript语法：context.globalCompositeOperation=“source-in”;

属性值

值	描述
source-over *	默认。在目标图像上显示源图像。
source-atop	在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in	在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。
source-out	在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示，目标图像是透明的。
destination-over	在源图像上显示目标图像。
destination-atop	在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。
destination-in	在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的。
destination-out	在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。
lighter	显示源图像 + 目标图像。
copy	显示源图像。忽略目标图像。
xor	使用异或操作对源图像与目标图像进行组合。*

刮刮卡案例代码

 <style>
    .ggk{
      width: 600px;
      height: 200px;
      position: relative;
    }
    .jp{
      width: 600px;
      height: 200px;
      text-align: center;
      color: deeppink;
      font-size: 50px;
      line-height: 200px;

    }
    .canvas{
      width: 600px;
      height: 200px;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
<div class="ggk">
  <div class="jp">谢谢惠顾</div>
  <canvas class="canvas" width="600" height="200"></canvas>
</div>
<script>
  var canvas = document.querySelector('.canvas')
  var ggkDom = document.querySelector('.ggk')
  var jpDom = document.querySelector('.jp')
  var ctx = canvas.getContext('2d')
  ctx.fillStyle = 'darkgray'
  ctx.fillRect(0,0,600,200)
  ctx.font = "50px 微软雅黑"
  ctx.fillStyle = "#fff"
  ctx.fillText("刮刮卡",250,110)

  var isDraw = false;//默认为false
  //设置isDraw = true,即为允许绘制
  canvas.onmousedown=function () {
      isDraw = true
  }

  //移动的时候绘制圆形，将源图像内的目标内容给清除掉
  canvas.onmousemove=function(e){
      if(isDraw){
          var x = e.pageX - ggkDom.offsetLeft;
          var y = e.pageY - ggkDom.offsetTop;
          ctx.globalCompositeOperation = "destination-out"
          ctx.arc(x,y,20,0,2*Math.PI)
          ctx.fill()
      }
  }

  canvas.onmouseup=function () {
      isDraw = false
  }

  var arr = [
      {content:"一等奖：Iphone12",p:0.05},
      {content:"二等奖：压力锅",p:0.2},
      {content:"三等奖：玩偶一个",p:0.3}
      ]
  var randomNum = Math.random()
  if(randomNum<arr[0].p){
      jpDom.innerHTML = arr[0].content
  }else if(randomNum<arr[1].p+arr[0].p){
      jpDom.innerHTML = arr[1].content
  }else if(randomNum<arr[2].p+arr[1].p+arr[0].p){
      jpDom.innerHTML = arr[2].content
  }
</script>