注意要点设置：
1.设置用户缩放：user-scalable=no|yes
代码如下
2.禁止拖动：
代码如下
document.ontouchmove = function(e){ e.preventDefault(); }; //文档禁止 touchmove事件
3.禁止弹出选择菜单：
代码如下
document.documentElement.style.webkitTouchCallout = "none";
现在贴上完整代码，想学习的同学自己去测试吧。
代码如下
<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;
// 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, 320, 568, "#696868", mobile);
})();
</script>
浏览效果如下：
word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);" alt="HTML5实例-简单实现类似刮刮卡的功能" src="http://img.blog.csdn.net/20140910151824730?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvb21zdmlw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />
word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);" alt="HTML5实例-简单实现类似刮刮卡的功能" src="http://img.blog.csdn.net/20140910151625734?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvb21zdmlw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />
【html5实例教程】HTML5实例-简单实现类似刮刮卡的功能
http://m.bbyears.com/wangyezhizuo/60364.html
推荐访问:html5教程 html5新特性 微博html5