原生canvas制作刮刮乐效果
商城网站很多时候会有类似刮刮乐的功能,网上看到的实现方式是通过两个canvas实现.
总觉得比较low.于是自己封装了一个纯canvas底层实现刮刮乐模型
当然功能没有封装的很全,比方说加个背景图/奖品为图片等等..
当然这些功能都可以很简单的修改源码去实现了.
下面提供一下制作思路
在canvas绘制顺序应该是:
绘制背景图片(这一步我没有做)
->绘制蒙版
->destination-out模式绘制擦除蒙版的线段
->destination-over模式绘制奖品内容
照例给个demo地址:
刮刮乐demo
效果:
调用代码:
/**
* 刮刮卡
* @param {Object} opt
* el: canvas id
* text: 显示文字
* textColor: 文字颜色 默认 #000
* maskColor: 蒙版颜色 默认 #000
* lineWidth: 擦除线条宽度 默认 20
* fontStyle: 文字样式 默认 30px Georgia
* callback: 用户第一次擦除回调(奖品在第一次擦除的时候获取.)
* method
* setValue: 奖品赋值
*/
var mask = maskShape({
el: 'canvas',
text: null,
maskColor: "#ccc",
textColor: '#000',
lineWidth: 20,
fontStyle: '30px Georgia',
callback: function() { //第一次擦除回调函数. this指向对象本身
//return 如果奖品是第一次擦除时加载进来,在callback中写ajax取值
//如果超过200毫秒延迟体验会比较差,可以预先做一个生产队列
var self = this;
setTimeout(function() {
var arr = ['一等奖', '二等奖', '三等奖', '谢谢惠顾'];
var z = Math.floor(Math.random() * arr.length);
self.setText(arr[z]);
}, 200);
}
});
//修改刮刮卡中值.
//mask.setText('aaaa');
