ScratchCanvas demo

ScratchCanvas 是一个基于canvas实现“刮刮卡”功能的js库。

使用纯色填充蒙层：

已经刮开了0%


<div class="container">
  <p class="percent-tips">已经刮开了0%</p>
</div>
        

.container {
  position: relative;
  width: 800px;
  height: 450px;
}
.percent-tips {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  font-size: 36px;
}
.container canvas {
  position: absolute;
}
        

import ScratchCanvas from 'scratch-canvas'
const container = document.querySelector('.container')
const scratchCanvas = new ScratchCanvas(container, {
  mask: '#999',
  onScratch: function (percent) {
    document.querySelector('.container .percent-tips').textContent = '已经刮开了' + percent + '%'
  }
})
scratchCanvas.init()
显示代码

使用图片蒙层：

已经刮开了0%


<div class="container">
  <p class="percent-tips">已经刮开了0%</p>
</div>
        

.container {
  position: relative;
  width: 800px;
  height: 450px;
}
.percent-tips {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  font-size: 36px;
}
.container canvas {
  position: absolute;
}
        

import ScratchCanvas from 'scratch-canvas'
const container = document.querySelector('.container')
const scratchCanvas = new ScratchCanvas(container, {
  mask: require('./mask.png'),
  pureMask: false,
  onScratch: function (percent) {
    document.querySelector('.container .percent-tips').textContent = '已经刮开了' + percent + '%'
  }
})
scratchCanvas.init()
显示代码

也可以通过给ScratchCanvas实例传入图片来创建背景层：


<div class="container"></div>
        

.container {
  position: relative;
  width: 800px;
  height: 450px;
}
        

import ScratchCanvas from 'scratch-canvas'
const container = document.querySelector('.container')
const scratchCanvas = new ScratchCanvas(container, {
  mask: require('./mask.png'),
  pureMask: false,
  bg: require('./bg.png'),
  brushSize: 80,
  brushPress: 0.025
})
scratchCanvas.init()
显示代码