likes
comments
collection
share

使用 canvas 还原儿童乐趣刮刮乐

作者站长头像
站长
· 阅读数 47

前言

小时候经常玩的一毛钱一次的刮刮乐玩具，慢慢的神秘感和乐趣，估计商家也赚的钵满盆盈。现在几乎都没有这一类的玩具了，为了让自己的小侄女重新体验到这种刮一刮的乐趣，设计一个电子版的刮一刮，让其体验一波。

核心原理

核心使用 canvas 来绘制图形。使用 canvas 覆盖一层涂层，然后在监听鼠标按下和移动事件，当鼠标的位置和涂层部分重叠就使其透明。涂层消除的关键是使用 globalCompositeOperation 属性。

  • canvas 标签，仅ie9以上可支持，当浏览器不兼容时，可进行友好提示
<canvas id="cavsElem">
  你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本
</canvas>
  • canvas 上下文，是其核心，所有的绘制操作 api 的入口或集合。使用[CanvasElement].getContext(‘2d’)来获取 2D 绘图上下文。
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

如果是 3d 的则应该是 canvas.getContext('webgl');

实践

第一步：先构建布局，一个文本 div 和一个画布 canvas。

<body>
   <div id="font1">一等奖</div>
   <canvas id="canvas" width="100px" height="50px"></canvas>
</body>

第二步：对画布进行绘制，先设置其颜色，然后在添加文字。在 API 上可以支持很多绘制文字的属性。如设置字体类型，字体大小，textAlign 文本的对齐方式。然后使用 fillText 方法填充文本

第三步：再给 canvas 添加监听鼠标事件。当鼠标左键按下和移动鼠标时，清除鼠标附近涂层。所以需要同时监听鼠标的按下和移动两个事件。

 (function () {
        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        // 绘制涂层
        ctx.beginPath();
        ctx.fillStyle = 'red';
        ctx.fillRect(0, 0, 100, 50);
        ctx.fillStyle = 'black';
        ctx.font = '18px "宋体"';
        ctx.fillText('刮一刮', canvas.width / 2 - 34, canvas.height / 2);
        // 给 canvas 添加监听鼠标移动事件
        canvas.addEventListener('mousemove', (m) => {
          if (m.which === 1 && m.button === 0) {
            const x = m.clientX - canvas.offsetLeft;
            const y = m.clientY - canvas.offsetTop;
            ctx.globalCompositeOperation = 'destination-out';
            ctx.beginPath();
            // 清除以鼠标位置为圆心，半径为10px的圆的范围
            ctx.arc(x, y, 10, 0, 2 * Math.PI);
            ctx.fill();
          }
        });
})();

这样子一个刮一刮的模块就设计完了。然后可以根据类似的方式添加多个方框。

转载自:https://juejin.cn/post/7130626941303914509
评论
请登录