js和html5(canvas)实现手机端刮刮卡抽奖效果完美兼容android/IOS/PC
绝对值得看的来篇，哈哈。本人亲自完成，有错误请大家指出：
现在的手机完美支持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>
相关文章
- 丰富直观的设计 用户体验设计中的巧妙过渡(2014-2-13 14:11:10)
- Crayon Syntax Highlighter是一款优秀的WordPress插件 实现代码高亮(2014-2-10 17:9:30)
- SyntaxHighlighter的Brush类型有哪些？(2014-2-10 17:3:22)
- m3u8是什么？单码/多码率适配流 m3u8最适合CDN来分发 m3u8可以做切片文件 HTML5 Video播放视频格式(2014-2-10 16:12:45)
- 【JS颜色选择器】216种web安全色选择器(2014-2-7 16:33:35)
- 图片放大缩小功能(2014-2-7 15:59:48)
- [分享]jQuery实现鼠标拖动图片效果示例代码(2014-1-20 11:59:33)
- [监控]js计算用户打开网页的停留时间(2014-1-16 12:21:34)
- [十二生肖属相]js计算星座属相示例代码(2014-1-16 12:19:59)
- JQuery实现鼠标移动到图片上显示边框效果(2014-1-10 12:18:16)
