HTML5实现刮刮卡功能

最新推荐文章于 2021-06-24 13:05:57 发布

超级谷歌

最新推荐文章于 2021-06-24 13:05:57 发布

阅读量3.1k

点赞数

分类专栏： Web开发技术相关

本文链接：https://blog.csdn.net/it_man/article/details/41207759

版权

Web开发技术相关专栏收录该内容

49 篇文章 0 订阅

订阅专栏

HTML5实现类似刮刮卡的功能

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

注意要点设置：

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

[java]view plaincopyprint?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />  

2.禁止拖动：

[java]view plaincopyprint?
document.ontouchmove = function(e){ e.preventDefault(); }; //文档禁止 touchmove事件  

3.禁止弹出选择菜单：

[java]view plaincopyprint?
document.documentElement.style.webkitTouchCallout = "none";  

具体实现代码：

[html]view plaincopyprint?
<!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>  
    </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, 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>  
  
</html>  