实例介绍
【实例简介】
说明
canvas刮奖组件
使用
<div id="lotteryArea"></div>
new scratchLottery(ElementID, {
lottery : '一等奖\niPhone6 一部\n恭喜您获奖',
mask : 'images/mask.png',
text : { //font : 'Arial', margin: [.2,.2]
}, //scratchType : 'point', openPct : 40, onscratch : function (percent) { console.log('已刮开：': percent '%');
}, onopen : function (percent) { console.log('刮开了 ': percent '%，移除遮罩');
}
});
默认参数说明
Options = {
lottery : '谢谢参与\n分享到微博再来一次',// 必须，奖项背景，刮出后显示的东西，可以是文字（支持换行）、图片
mask : '#ccc', // 必须，遮罩层，可以是颜色值、图片
width : 0, // 宽度，若为0，则匹配box宽度
height : 0, // 高度，若为0，则匹配box高度
lotteryCanvas : null, // 背景Canvas对象，为空则自动创建
lotteryType : null, // 背景选项（text|image），默认自动检测lottery，可强制指定
text : { // 字体样式，lotteryType为text启用
bgColor : '#fff', // 背景色
font : 'Microsoft YaHei', // 字体
style : 'Bold', // 第一行文字样式，（font-style|font-variant|font-weight）
size : 0, // 第一行文字大小，为0则自动计算
color : '#f60', // 第一行文字颜色
styleOther : '', // 其他文字样式
sizeOther : 0, // 其他文字大小，为0则自动计算
colorOther : '#666', // 其他文字颜色
margin :[.15,.1], // 区域四周留白，[上下,左右]（单位%）
space : 0, // 文字行间距，为0则自动计算
align : 'center' // 对齐方式（left|right|center）
},
useImageSize : false, // 跟随图片大小，lotteryType为image启用
maskCanvas : null, // 遮罩Canvas对象，为空则自动创建
maskType : null, // 遮罩选项（color|image），默认自动检测mask，可强制指定
scratchType : 'line', // 刮擦类型，（line|point）
scratchWidth : 0, // 刮擦画笔宽度，为0则自动计算
openPct : 50, // 刮开百分比，回调onopen
onscratch : null, // 刮擦回调，参数（擦除面积百分比）
onopen : null // 刮擦完毕回调，参数（擦除面积百分比）
};
【实例截图】
【核心代码】
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>scratchLottery demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<style type='text/css'>
body {
height:1000px;
}
#lotteryArea {
position:relative;
width:300px;
height:156px;
}
#lotteryArea canvas {width:100%; height:100%;}
#drawPercent {
color:#F60;
}
</style>
</head>
<body>
<div><button id="freshBtn">刷新</button> <button id="resizeBtn">切换尺寸</button> <label>已刮开 <span id="drawPercent">0%</span> 区域。</label></div>
<div id="lotteryArea"></div>
<script type='text/javascript' src="js/scratchLottery.source.js"></script>
<script>
var lottery,
area = document.getElementById('lotteryArea'),
pctNode = document.getElementById('drawPercent');
window.onload = function() {
lottery = new scratchLottery('lotteryArea', {
//lottery : 'http://www.baidu.com/img/bdlogo.gif',
lottery : '一等奖\niPhone6 一部\n恭喜您获奖',
//lottery : 'First prize\nCongratulations!',
mask : 'images/mask.png',
text : {
//font : 'Arial',
margin: [.2,.2]
},
//scratchType : 'point',
openPct : 40,
onscratch : drawPercent,
onopen : openLottery
});
// 刷新
document.getElementById('freshBtn').onclick = function() {
var txt = randomStr(10);
console.info('fresh: ' txt);
pctNode.innerHTML = '0%';
lottery.init(txt, 'text');
};
// 切换尺寸
document.getElementById('resizeBtn').onclick = function() {
var width = area.offsetWidth,
size = [300, 156];
if(width==300) {
size = [500, 260];
area.style.width = size[0] 'px';
area.style.height = size[1] 'px';
}else{
area.style.cssText = '';
}
lottery.resize(size[0], size[1]);
};
};
function drawPercent(percent) {
pctNode.innerHTML = percent '%';
}
function openLottery(percent) {
alert('恭喜呀~~~~' percent);
}
function randomStr(len) {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for(var i = 0; i<len; i )
text = possible.charAt(Math.floor(Math.random()*possible.length));
return text;
}
function parseObject (obj, t){
if(typeof(obj)!='object') return '';
t = t ? t : 1;
var result = '', tab = new Array(t).join('\t');
for(var i in obj) {
if(obj[i] && typeof obj[i]=='object' && !obj[i].length) {
result = tab i ':{\n' parseObject(obj[i], t 1) '}\n';
}else {
result = tab i ':' obj[i] '\n';
}
}
return result;
}
</script>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论