HTML5实现类似刮刮卡的功能
2015年03月26日 10:57
0 点赞
0 评论
更新于 2025-11-21 18:34
注意要点设置
1. 设置用户缩放
在HTML文档的<head>部分添加<meta>标签，以控制页面的缩放行为。user - scalable属性可以设置为no或yes，这里我们设置为no，禁止用户缩放页面。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
2. 禁止拖动
为了防止用户在触摸设备上拖动页面，我们可以通过JavaScript禁止touchmove事件。
document.ontouchmove = function(e) {
e.preventDefault();
};
3. 禁止弹出选择菜单
使用CSS属性webkitTouchCallout来禁止在触摸设备上弹出选择菜单。
document.documentElement.style.webkitTouchCallout = "none";
具体实现代码
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<title>志玲传说</title>
<style type="text/css">
body {
width: 320px;
min-height: 568px;
overflow: hidden;
margin: 0;
}
#canvas {
background: url(img/lzl.jpg) fixed center center no-repeat;
/* 奖品图片 */
background-size: cover;
width: 320px;
min-height: 480px;
overflow: hidden;
position: relative;
}
.before {
background: none !important;
}
#canvas canvas {
cursor: url("img/bird.png") 0 0, auto;
/* PC端的手势图片 */
}
</style>
</head>
<body oncontextmenu="return false;" onselectstart="return false;">
<div id="canvas"></div>
<script type="text/javascript">
(function() {
window.onload = function() {
// 禁止拖动设置
document.ontouchmove = function(e) {
e.preventDefault();
};
// 判断浏览器是否支持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 || 320;
canvas.node.height = height || 480;
// 给canvas标签添加Id
canvas.node.id = 'canvasTag';
parent.appendChild(canvas.node);
return canvas;
}
function init(container, width, height, fillColor, type) {
var canvas = createCanvas(container, width, height);
var ctx = canvas.context;
// 定义一个自定义的fillCircle方法
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, 320, 568, '#696868', mobile);
};
})();
</script>
</body>
</html>
代码解释
1. 浏览器兼容性检查
在页面加载完成后，首先检查浏览器是否支持canvas元素。如果不支持，会弹出提示框告知用户。
try {
document.createElement('canvas').getContext('2d');
} catch (e) {
var addDiv = document.createElement('div');
alert('您的手机不支持刮刮卡效果哦~!');
}
2. 设备类型判断
通过navigator.userAgent来判断用户使用的设备类型，分为PC、iPhone和Android。
var u = navigator.userAgent,
mobile = 'PC';
if (u.indexOf('iPhone') > -1) mobile = 'iphone';
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) mobile = 'Android';
3. 创建Canvas元素
createCanvas函数用于创建一个canvas元素，并添加到指定的父元素中。
function createCanvas(parent, width, height) {
var canvas = {};
canvas.node = document.createElement('canvas');
canvas.context = canvas.node.getContext('2d');
canvas.node.width = width || 320;
canvas.node.height = height || 480;
canvas.node.id = 'canvasTag';
parent.appendChild(canvas.node);
return canvas;
}
4. 初始化Canvas
init函数用于初始化canvas，包括绘制初始覆盖层、监听鼠标或触摸事件等。
function init(container, width, height, fillColor, type) {
var canvas = createCanvas(container, width, height);
var ctx = canvas.context;
// 定义自定义方法
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);
}
预览效果图
此处可添加刮刮卡功能实现后的预览效果图。
图片素材
在代码中使用了img/lzl.jpg作为奖品图片，img/bird.png作为PC端的手势图片，请确保这些图片素材存在于相应的路径下。