刮刮卡效果在微信浏览器无效?在系统内置浏览器有效。

python2002 发布于 2014/10/11 12:54
阅读 839
收藏 0

刮刮卡效果在微信浏览器无效。在系统内置浏览器正常。测试手机为安卓。

加载中
0
python2002
python2002
<script type="text/javascript">
    (function () {
        window.onload = function () {
            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 || 100;
            canvas.node.height = height || 100;
            parent.appendChild(canvas.node);
            return canvas;
        }
        alert(mobile);
        function init(container, width, height, fillColor, type) {
            var canvas = createCanvas(container, width, height);
            var ctx = canvas.context;
            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;
                    alert(x);
                    alert(y);
                } 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);
                alert("-------------------");
            }, false);
        }
        var container = document.getElementById('canvas');
        init(container,150,38, '#696868', mobile);
    })();
</script>



0
gaidie
gaidie

以前也遇到过,不记得是怎么解决的。你的错误原因是应该是你使用了一些canvas的特性,微信内置的浏览器不一定完全支持。当时遇到我记得我是找的一个刮刮卡例子解决的。这里有一个类似的插件 附上一个网址

http://www.cnblogs.com/txw1958/p/weixin-55-ScratchTicket.html

你试试看吧

返回顶部
顶部