LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

用canvas实现一个刮刮卡效果

admin
2024年10月30日 13:27 本文热度 548


先看上面的效果,这是常见的刮刮卡抽奖效果,那么前端如何使用代码实现这样的效果呢?主流方案是采用canvas来实现。


首先要实现这种效果,核心是要知道canvasglobalCompositeOperation属性,这个属性的作用是控制canvas上不同图层之间的显示效果。

这里我们需要使用到globalCompositeOperationdestination-out属性,这个属性描述的效果是,当新图层绘制到原始图层上时候,原始图层保持在新图层不重叠的部分,仅保留现有画布内容和新形状不重叠的部分。


有了这个效果之后,我们只需要将要显示的东西放置在canvas后面就可以了,至于刮刮卡的效果,就是在 mosemove事件里面,动态绘制透明的图层到 canvas 上就好了。


代码如下:

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title></title>
      <style type="text/css">
          body,html {
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
          }
          .box {
              user-select: none;
              position: relative;
              border: 2px solid #333;
              width: 400px;
              height: 120px;
              font-size: 50px;
              line-height: 120px;
              text-align: center;
          }
          #myCanvas {
              position: absolute;
              top: 0;
              left: 0;
          }
      </style>
  </head>
  <body>
      <div class="box">
          恭喜您,中奖了
          <canvas id="myCanvas" width="400px" height="120px"></canvas>
      </div>
  </body>
  <script type="text/javascript">
      const canvas = document.getElementById('myCanvas');
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#ccc';
      ctx.fillRect(0, 0, 400, 120);
      ctx.globalCompositeOperation = "destination-out";
      canvas.onmousedown = function() {
          canvas.onmousemove = function(event) {
              ctx.beginPath();
              ctx.arc(event.offsetX, event.offsetY, 16, 0, 7, false);
              ctx.fill();
          }
      }

      document.body.onmouseup = function() {
          canvas.onmousemove = null;
      }
  </script>
</html>

arc(x, y, r, startAngle, endAngle, anticlockwise): 

以(x, y) 为圆心,以r 为半径,从 startAngle 弧度开始到endAngle弧度结束。

anticlosewise 是布尔值,true 表示逆时针,false 表示顺时针(默认是顺时针)。

注意:这里的度数都是弧度;0 弧度是指的 x 轴正方向。


该文章在 2024/10/30 15:13:15 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved