html5 js 实现刮刮卡效果

来源：互联网发布：java服务器端开发技术编辑：程序博客网时间：2024/05/19 12:15

<!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('您的手机不支持刮刮卡效果哦~!');
            }
        };

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 u = navigator.userAgent, mobile = 'PC';
        if (u.indexOf('iPhone') > -1) mobile = 'iphone';
        if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) mobile = 'Android';

        var container = document.getElementById('canvas');
        init(container, 320, 568, '#00930f', mobile);
    })();
</script>

</html>

0 0