html5实现刮刮卡效果,HTML5实现类似刮刮卡的功能

HTML5实现类似刮刮卡的功能

有这样一个功能，当我们使用微信公众号，发送图片时......此处省略300字！

注意要点设置：

1.设置用户缩放：user-scalable=no|yes

2.禁止拖动：document.ontouchmove = function(e){ e.preventDefault(); }; //文档禁止 touchmove事件

3.禁止弹出选择菜单：document.documentElement.style.webkitTouchCallout = "none";

具体实现代码：

志玲传说

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端的手势图片*/

}

(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);

})();

预览效果图：

图片素材：

本文来源于网络：查看 >https://blog.csdn.net/rzg813/article/details/39181361