百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> HTML5实例-简单实现类似刮刮卡的功能
分享文章到:

HTML5实例-简单实现类似刮刮卡的功能

发布时间:01/15 来源: 浏览: 关键词:
智能手机的时代,当我们使用微信公众号,发送图片时会有类似刮刮卡的功能,最近正在学习html5,突发奇想就做了一个出来。


注意要点设置:


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

 代码如下
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> 


2.禁止拖动:

 代码如下
document.ontouchmove = function(e){ e.preventDefault(); }; //文档禁止 touchmove事件 


3.禁止弹出选择菜单:
 代码如下

document.documentElement.style.webkitTouchCallout = "none"; 




现在贴上完整代码,想学习的同学自己去测试吧。
 代码如下


<!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>

 

浏览效果如下:

HTML5实例-简单实现类似刮刮卡的功能

 

HTML5实例-简单实现类似刮刮卡的功能

HTML5实例-简单实现类似刮刮卡的功能

 

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有6人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板