HTML5实现类似刮刮卡的功能
注意要点设置: 1.设置用户缩放:user-scalable=no|yes
[java]
- <Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
复制代码
2.禁止拖动:
[java]
- document.ontouchmove = function(e){ e.preventDefault(); }; //文档禁止 touchmove事件
复制代码
3.禁止弹出选择菜单:
[java]
- 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;
- min-height: 480px;
- 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>
- </body>
- <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,height,fillColor,type) {
- var canvas = createCanvas(container,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,Math.PI * 2,false);
- this.fill();
- ctx.clearTo = function(fillColor) {
- ctx.fillStyle = fillColor;
- ctx.fillRect(0,serif; font-size:12px; line-height:1.8em"> ctx.clearTo(fillColor || "#ddd");
- canvas.node.addEventListener(mobile == "PC" ? "mousedown" : "touchstart",function(e) {
- canvas.isDrawing = true;
- },serif; font-size:12px; line-height:1.8em"> canvas.node.addEventListener(mobile == "PC" ? "mouseup" : "touchend",serif; font-size:12px; line-height:1.8em"> canvas.isDrawing = false;
- canvas.node.addEventListener(mobile == "PC" ? "mousemove" : "touchmove",serif; font-size:12px; line-height:1.8em"> 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,fillColor);
- var container = document.getElementById('canvas');
- init(container,320,568,'#696868',mobile);
- })();
- </script>
- </html>
复制代码
|