手撕刮刮乐

[yaofly2012]

背景

最近在学习canvas。准备写个刮刮乐练练手。

需求

1. 基本的瓜瓜交互；
2. 支持背景图片；
3. 支持刮到指定大小区域时触发回调函数。

实现

效果：

实现了一个JS库专门处理核心逻辑。完整Demo参考这里。

            var guaGuaLe = new GuaGuaLe('js-canvas', {
                backgroundColor: 'red',
                backgroundImage: '/asserts/star.png', 
                backgroundRepeat: 'repeat',
                backgroundSize: '40',
                backgroundPosition: 'center',
                onWipeThreshold: ares => {
                    console.log(`wipe area ${ares}`)
                    document.getElementById('js-result').innerHTML = '中奖啦'
                }
            })
            document.getElementById('js-refresh').addEventListener('click', () => {
                document.getElementById('js-result').innerHTML = '...'
                guaGuaLe.refresh();
            })

options	说明	默认值	demo
backgroundColor	背景颜色，即图刮的颜色	#bbb
backgroundImage	背景图片，对应canvas drawImage参数1
backgroundRepeat	背景图片是否重复，类似CSS的backgroud-repeat，但是取值只有repeat, repeat-x, repeat-y，其他值则表示不重复	repeat
backgroundSize	背景图片大小，类似CSS background-size。但取值只有contain, cover, x, x y	无	contain:, cover:, 40:, 40 80:
backgroundPosition	背景图片位置，类似CSS background-position，但取值只有top, right, bottom, left, center, x, x y	无
onWipe	图刮回调函数，ares => {}，函数的实参是具体图刮面积[0, 100]	无
onWipeThreshold	图刮指定面积才触发的回调	无
swipeThreshold	触发onWipeThreshold的阀值	无

其他option如下，用法同canvas API：

    'globalCompositeOperation'
    'globalAlpha'
    'lineCap'
    'lineWidth'
    'lineJoin'
    'miterLimit'
    'shadowColor'
    'shadowBlur'
    'shadowOffsetX'
    'shadowOffsetY'