兼容React的刮刮乐完整代码实现-CSDN博客

本文链接：https://blog.csdn.net/u012834688/article/details/142643731

需要兼容React的刮刮乐完整代码实现

在现代Web开发中，React作为一种流行的前端框架，为开发者提供了构建动态界面的强大工具。刮刮乐效果作为一种趣味性的用户交互，能够显著提升用户体验和参与度。本文将详细介绍如何在React项目中实现一个兼容的刮刮乐效果，并提供完整的代码示例。

1. 需求分析

首先，我们需要明确刮刮乐效果的基本需求：

用户可以通过鼠标或触摸（在移动设备上）来刮开涂层，显示下方的内容或奖项。
刮开的过程应当流畅且响应迅速。
刮开效果应具有视觉吸引力，如渐显、透明度变化等。

2. 技术选型

在React中实现刮刮乐效果，我们可以利用HTML5的<canvas>元素来绘制涂层和响应用户的刮擦操作。<canvas>提供了丰富的绘图API，能够很好地满足我们的需求。

3. 完整代码实现

以下是一个兼容React的刮刮乐效果的完整代码实现：

3.1 组件结构

我们将创建一个名为ScratchCard的React组件，该组件包含<canvas>元素和必要的状态管理逻辑。

import { useEffect } from 'react';
import './scratchCard.less';
import scr from '@assets/images/scratch/scr.png'
export default function Canvas() {
  function init() {
    let gj = document.querySelector('.gj');
    let jp = document.querySelector('#jp') as HTMLElement;
    let canvas = document.querySelector('#mask') as HTMLCanvasElement;
    let ctx = canvas?.getContext('2d') as any;
	// 遮罩层mask设置
    ctx.fillStyle = 'rgba(0,0,0,0,0)';
    var img = new Image();
    img.onload = function() {
      // 在canvas上绘制图片
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  };
  // 设置图片源地址
  img.src = scr;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#ffffff';
    ctx.font = '16px 微软雅黑';
    ctx?.fillText('刮奖区', 80, 50); // 文字在框中位置

	// 奖品部分逻辑
    let arr = ['一等奖', '二等奖', '三等奖', '再来一次'];
    let randomNum = Math.random() * 100;
    if (randomNum < 10) {
      jp.innerHTML = arr[0];
    } else if (randomNum < 30) {
      jp.innerHTML = arr[1];
    } else if (randomNum < 60) {
      jp.innerHTML = arr[2];
    } else {
      jp.innerHTML = arr[3];
    }
	// 绘图部分
    let isDraw = false;
    // canvas.onmousedown = () => (isDraw = true);
    // canvas.onmouseup = () => (isDraw = false);
    //  // 兼容移动端
    //  canvas.onmousemove = (e) => {
    //   console.log(9999);
    //   if (isDraw) {
    //     writeText(ctx, e, gj);
    //   }
    // };

     //鼠标按下开刮
     canvas.onmousedown = function () {
      canvas.onmousemove = function (e) {
        console.log('55656565656',e)
        if (isDraw) {
          writeText(ctx, e, gj);
        }
      };
    };
    //鼠标抬起不刮开
    canvas.onmouseup = function () {
      canvas.onmousemove  = () => (isDraw = true);
    };
    // 兼容移动端
    canvas.ontouchstart = function () {
      canvas.ontouchmove = function (e) {
        // console.log('zhouuu',isDraw,e.touches);

        if (isDraw) {
          writeText(ctx, e.touches[0], gj);
        }
      };
    };
    canvas.ontouchend   = () => (isDraw = true);
    
  } 
  function writeText(ctx: any, e: MouseEvent, gj: HTMLElement) {
    // console.log('zhouhh',e)
    ctx?.beginPath();
    let x = e.pageX - gj?.getBoundingClientRect().left;
    let y = e.pageY - gj?.getBoundingClientRect().top;
    ctx.globalCompositeOperation = 'destination-out'; // !!! 在后绘制的图形上方显示先绘制的图形, 相交部分由先绘制图形的填充(颜色,渐变,纹理)覆盖
    ctx?.closePath();
    ctx?.arc(x, y, 20, 20, Math.PI * 10);
    ctx?.fill();
  }
  useEffect(() => {
    init();
  }, []);
  return (
    <div className="container">
      <div className="  text-center  text-[16px]">刮刮乐</div>
      <div className="gj mt-4 cursor-pointer">
        <div id="jp"></div>
        <canvas id="mask" className='canvass'></canvas>
      </div>
    </div>
  );
}