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()
<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()