闲着没事儿，用Canvas与React做一个刮奖,刮刮卡组件吧（已开源）

适用于刮刮卡,刮奖等业务

话不多说，先上效果图

镜像地址

目前发布了 1.0.0-beat 版本

GitHub - 欢迎各位给我提 issue 与 pr。

NPM

文档 - 有一些支持 API 文档和可以用 codesanbox 打开的案例。

使用方式

因为实现都是用hook写法，所以react 16.8以上才可以用喔

$ npm install scratch-card-react
# or
$ yarn add scratch-card-react
# or
$ pnpm install scratch-card-react

import { ScratchCard } from 'scratch-card-react';

export default () => {
  return (
    <div>
      <ScratchCard width={300} height={200} coverImg={src}>
        <p>完全可以自己定义的 children 元素</p>
      </ScratchCard>
    </div>
  );
};

属性

属性	说明	类型	默认值
classNames	语义结构化的 className	{ root?:string, mask?:string, body?:string }	-
children	刮开蒙层显示的底部元素	ReactNode	-
coverColor	刮刮卡蒙版的颜色	string	#ddd
coverImg	刮刮卡蒙版的图片	string | Promise<any>	-
callbackInfo	刮开一定比例触发的回调信息	{ callback:()=>void,radio:number }	-
width	刮刮卡宽度	number	240
height	刮刮卡高度	number	120

Ref

属性	说明	类型
canvasContainer	canvas 节点	HTMLCanvasElement
initDone	初始化完成	boolean
clearCard	清除蒙版	()=>void

如果有人使用的话～ 后续考虑下再支持一下Vue3版本吧～