scraper

Usage

scraper兼容主流的桌面与移动端浏览器，包括IE6+, IE Mobile 10+，但是IE8及IE8以下支持canvas需要 FlashCanvas，注意：explorercanvas不支持clip()方法，因此不能使用。

scraper的使用需要但不限于以下HTML

<div class="card-wrap">
    <div id="result">二等奖</div>
    <canvas id="scraper" width="200px" height="60px"></canvas>
</div>

相应的CSS可以根据应用而写，本示例中为：

.card-wrap {
    width: 200px;
    background-color: #f50;
    position: relative;
}
#result {
    width: 200px;
    height: 50px;
    padding-top: 10px;
    font-size: 24px;
    text-align: center;
    color: #333;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#scraper {
    position: absolute;
    top: 0;
    left: 0;
}

scraper作为window的方法，可接受两个参数：第一个为canvas元素；第二个为配置对象：

<script src="scraper.js"></script>
<script>
scraper(document.getElementById('scraper'), {
    prizeArea: [70, 25, 20, 20],
    onscrape: function() {
        alert('开始刮');
        // 此处可以向后台发送ajax请求，返回要显示的结果
    },
    onresult: function() {
        alert('显示结果');
        // 此处用来处理显示结果后执行的代码
    }
});
</script>

DEMO如下 单独页

Config Options

也许常用的配置项为：coverBgColor, prizeArea, onscrape, onresult 。

bindElement Element (default:canvas) - 事件代理对象
coverText Array (default:['', 0, 0]) - 数组三个值依次代表：覆盖层上显示文字、文字横坐标，文字纵坐标(从文字左下角至canvas左上角)
coverColor String (default:'#333') - 覆盖层文字颜色值
coverFont String (default:'16px Arial, sans-serif') - 覆盖层文字格式，与CSS的font属性值一样格式
coverBgColor String (default:'#eee') - 覆盖层背景色
pointRadius Integer (default:10) - 刮覆盖层时，触点半径值
prizeArea: array (default:[0, 0, 100, 40]) - 结果(中奖)区域，矩形，参数依次为x, y, width, height
shape String (default:null) - 覆盖层形状图片路径
shapeX Integer (default:0) - 覆盖层形状图片水平坐标
shapeY Integer (default:0) - 覆盖层形状图片垂直坐标
shapeW Integer (default:图片原宽度) - 覆盖层形状图片宽度
shapeH Integer (default:图片原高度) - 覆盖层形状图片高度
onscrape Function (default:function() {}) - 开始刮(触摸或鼠标按下)覆盖层时回调函数
onresult Function (default:function() {}) - 刮到(触点/鼠标移动到)结果(中奖)区域时触发的回调

Notes: onscrape 回调函数的上下文为options对象，即scraper的第二个参数，这样可以在此函数中更改options的任一属性，比如此函数里先向后台请求一个结果，然后根据后台返回结果动态更改prizeArea的值。

Issues

遇到Bug或使用问题，可以反馈到这里：https://github.com/Alex1990/scraper/issues

scraper

Usage

Config Options

Issues

License