js和html5(canvas)实现手机端刮刮卡抽奖效果完美兼容android/IOS/PC

分类:Javascript| 发布:佚名| 查看: | 发表时间:2014/4/15

绝对值得看的来篇,哈哈。本人亲自完成,有错误请大家指出:
现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的

效果图如下:

刮刮卡效果
​ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS
如果要在pc浏览的话,得改下js,目前支持谷歌,火狐,ie>=10,如果网友想要的话我就去写个
代码如下: 在线查看刮刮卡擦的效果例子

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<title>eraser effect</title>
<style type="text/css">
#canvas
{
background: url(../images/winning-ticket.jpg); /*奖品图片*/
width: 531px;
height: 438px;
}

.before
{
background: none !important;
}

#canvas canvas
{
cursor: url("../images/hand.jpg") 0 0, auto; /*PC端的手势图片*/
}
</style>
</head>
<body oncontextmenu="return false;" onselectstart="return false;">
<div id="canvas">
</div>
</body>
<script type="text/javascript">

(function () {

window.onload = function () {

/**判断浏览器是否支持canvas**/

try {

document.createElement('canvas').getContext('2d');

} catch (e) {

var addDiv = document.createElement('div');

alert('您的手机不支持刮刮卡效果哦~!');

}

};

var u = navigator.userAgent, mobile = 'PC';

if (u.indexOf('iPhone') > -1) mobile = 'iphone';

if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) mobile = 'Android';

function createCanvas(parent, width, height) {

var canvas = {};

canvas.node = document.createElement('canvas');

canvas.context = canvas.node.getContext('2d');

canvas.node.width = width || 100;

canvas.node.height = height || 100;

parent.appendChild(canvas.node);

return canvas;

}

function init(container, width, height, fillColor, type) {

var canvas = createCanvas(container, width, height);

var ctx = canvas.context;

// define a custom fillCircle method

ctx.fillCircle = function (x, y, radius, fillColor) {

this.fillStyle = fillColor;

this.beginPath();

this.moveTo(x, y);

this.arc(x, y, radius, 0, Math.PI * 2, false);

this.fill();

};

ctx.clearTo = function (fillColor) {

ctx.fillStyle = fillColor;

ctx.fillRect(0, 0, width, height);

};

ctx.clearTo(fillColor || "#ddd");

canvas.node.addEventListener(mobile == "PC" ? "mousedown" : "touchstart", function (e) {

canvas.isDrawing = true;

}, false);

canvas.node.addEventListener(mobile == "PC" ? "mouseup" : "touchend", function (e) {

canvas.isDrawing = false;

}, false);

canvas.node.addEventListener(mobile == "PC" ? "mousemove" : "touchmove", function (e) {

if (!canvas.isDrawing) {

return;

}

if (type == 'Android') {

var x = e.changedTouches[0].pageX - this.offsetLeft;

var y = e.changedTouches[0].pageY - this.offsetTop;

} else {

var x = e.pageX - this.offsetLeft;

var y = e.pageY - this.offsetTop;

}

var radius = 20;

var fillColor = '#ff0000';

ctx.globalCompositeOperation = 'destination-out';

ctx.fillCircle(x, y, radius, fillColor);

}, false);

}

var container = document.getElementById('canvas');

init(container, 531, 438, '#696868', mobile);

})();

</script>
</html>

在线查看刮刮卡擦的效果例子

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/javascript/984.html