html部分
<head>
<meta charset="utf-8"/>
<!-- IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Fram -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<title>刮刮卡</title>
<link rel="stylesheet" type="text/css" charset="utf-8" href="../../web/css/base.css">
<link rel="stylesheet" type="text/css" charset="utf-8" href="../../web/css/media_phone.css">
<link rel="stylesheet" type="text/css" charset="utf-8" href="../../web/css/clearCard.css">
</head>
<body>
<div class="clearCard">
<!-- 刮刮卡的画布 -->
<canvas id="canvas">
</canvas>
</div>
<script type="text/javascript" charset="utf-8" src="../../assets/jquery/jquery-3.2.1.js"></script>
<script type="text/javascript" charset="utf-8" src="../../web/js/jquery-clearCard.js"></script>
<script type="text/javascript" charset="utf-8" src="../../web/js/clearCard.js"></script>
</body>
jquery刮刮卡插件
//全局变量
var isClear = false; //表示是否刮卡
;(function ($) {
$.fn.extend({
'createCanvas': function (id, obj) {
//获取画布对象
var canvas = document.getElementById(id);
//设置样式
setCanvasStyle(canvas, obj);
if (canvas.getContext) {
var ctx = setCanvas(canvas, "rect", obj['background-color']);
canvasEvent(canvas, ctx, obj['step'], obj['time']);
}
}
});
/*
*声明一个函数用于设置画布样式
*canvas表示画布
*obj表示用户定义的样式表
*/
function setCanvasStyle(canvas, obj) {
canvas.style.cursor = "pointer";
canvas.style.backgroundImage = "url("+ obj['image'] + ")";
canvas.style.backgroundRepeat = "no-repeat";
canvas.style.backgroundPosition = "center center";
canvas.style.backgroundSize = "contain";
canvas.style.overflow = "hidden";
canvas.style.border = obj['border'];
canvas.style.width = obj['width'] || obj['height'];
canvas.style.height = obj['height'] || obj['width'];
}
/*
*声明一个函数用于设置画布的样式
*c表示画布的元素节点
*shape表示绘画的形状
*color表示画布上的颜色
*/
function setCanvas(c, shape, color) {
//设置shape和color的默认值
if (!checkOptions(shape, "string")) {
shape = "rect";
}
if(!checkOptions(color, "string")) {
color = "gray";
}
var ctx = c.getContext("2d");
ctx.fillStyle = color;
ctx.beginPath();
switch (shape) {
case "rect":
ctx.rect(0, 0, canvas.width, canvas.height);
break;
default:
return ;
break;
}
ctx.closePath();
ctx.fill();
return ctx;
}
/*
*该函数用于处理用户的出发的事件
*canvas表示画布对象
*step表示触点所在正方形的宽度
*/
function canvasEvent(canvas, ctx, step, time) {
step -= 0;
time -= 0;
//给step和time设置默认值
if (!checkOptions(step, "number", 0, 100)) {
step = 5;
}
if (!checkOptions(time, "number", 0, 15000)) {
time = 3000;
}
/*
*该函数用于获取触点在画布上清除行为
*e表示触点默认传递的参数
*c表示设置的画布对象
*step表示触点所在正方形的宽度
*/
function clearCanvas(e) {
if (!isClear) {
return ;
}
e.preventDefault();
e.stopPropagation();
//声明一个变量保存画布通过getBoundingClientRect获取的对象
var box = canvas.getBoundingClientRect();
//声明变量保存当前触点在画布上的准确位置
var curX = 0, curY = 0;
if (isPC) {
e = e || window.event;
curX = (e.clientX - box.left) * (canvas.width / box.width);
curY = (e.clientY - box.top) * (canvas.height / box.height);
} else {
var touch = e.targetTouches[0];
curX = (touch.pageX - box.left) * (canvas.width / box.width);
curY = (touch.pageY - box.top) * (canvas.height / box.height);
}
ctx.clearRect(curX - step, curY - step, curX, curY);
//定义一个定时器,判断鼠标在画布上悬浮的时间
//如果大于规定的,则清除所有的图层,显示刮刮乐的背景图
var timer = setTimeout(function () {
if (isClear) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
clearTimeout(timer);
}, time);
}
if (isPC) {
canvas.onmousedown = function () {
isClear = !isClear;
}
canvas.onmouseup = function () {
isClear = !isClear
}
canvas.onmousemove = function (e) {
clearCanvas(e);
}
} else {
canvas.addEventListener("touchstart", function (e) {
isClear = !isClear;
});
canvas.addEventListener("touchend", function (e) {
isClear = !isClear;
});
canvas.addEventListener("touchmove", function (e) {
clearCanvas(e);
}, false);
}
}
/*
*该函数用于判断当前设备是否是PC端
*如果返回true则表示当前在PC端
*否则当前再移动端
*
*/
function isPC() {
var userAgentInfo = navigator.userAgent.toLowerCase();
var Agents = new Array("android", "iphone", "symbianOS", "windows phone", "ipad", "ipod");
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false; break;
}
}
return flag;
}
/*
*该函数用于判断是否满足指定类型,数字判断是否为数字以及超出最大值或最小值,字符串判断是否为空
*value表示要判断的值
*type表示要判断的类型
*/
function checkOptions(value, type, min, max) {
if (type === 'string') {
if (value !== null || value !== value || value !== '') {
return true;
} else {
return false;
}
} else if(type === 'number') {
if (isNaN(value) || value<min || value>max) {
return false;
} else {
return true;
}
}
}
}(jQuery));
js引用插件
$(function () {
//canvas表示id名
$(".clearCard").createCanvas("canvas", {
"border": "1px solid #f2f2f2",
"image": "../../web/img/rf-raffle3.jpg", //画布下面的图片
"width": "6rem", //画布的宽
//"height": "4rem", //画布的高
"step": "20", //触点(鼠标)点击每次消失正方形的宽度
"time": "2000" //触点(鼠标)按下停留指定时间后全部消失
});
});