Question

0 0

哪位大神帮忙看看，微信扫描内置打开是不是不支持canvas

在浏览器打开没问题，用微信扫描后内置打开，那个刮层刮不动，安卓微信有问题，ISO微信扫描打开可以挂


 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="m.99m.cn">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>99mi.com</title>
<style>
*{ margin:0; padding:0;}
#guaqian{ display:none;}
.trust{ font-size:12px; width:320px; height:323px; margin:0 auto; background:url(http://trust.99mi.com/trust/bg.jpg) no-repeat center center; overflow:hidden;}
.logo{ width:148px; height:42px; display:inline-block; background:url(http://trust.99mi.com/trust/logo.png) no-repeat; text-indent:-999999px;}
.trust_gua{ width:290px; height:32px; margin:15px 0 0 15px; overflow:hidden;}
canvas{ width:290px; height:32px; overflow:hidden;}
.trust_fhsy{ text-align:center; margin-top:70px; padding-top:10px; background:url(http://trust.99mi.com/trust/xian.png) no-repeat center top;}
.trust_fhsy a{ font-weight:bold; color:#e24040; text-decoration:none;}
@media only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 240dpi),
       only screen and (min-resolution: 2dppx)
    { 

    .logo{ background-image:url(http://trust.99mi.com/trust/[email protected]); background-size:148px 42px;}
    .trust_fhsy{ background-image:url(http://trust.99mi.com/trust/[email protected]); background-size:323px 1px;}

    }
</style>
</head>

<body>


<div class="trust">
    <p style="text-align:center; margin-top:44px;"><a href="http://m.99m.cn" class="logo">99mi.com</a></p>
    <div class="trust_gua">
        <img src="http://trust.99mi.com/trust/gq.jpg" id="guaqian" />
        <canvas/>
        <script type="text/javascript">     
        (function(bodyStyle){
            bodyStyle.mozUserSelect = 'none';
            bodyStyle.webkitUserSelect = 'none';
            var img = new Image();
            var canvas = document.querySelector('canvas');
            canvas.style.backgroundColor='transparent';
            canvas.style.backgroundImage='url(http://trust.99mi.com/trust/gq.jpg)';
            canvas.style.position = 'absolute';
            img.addEventListener('load',function(e){
                var ctx;
                var w = img.width, h = img.height;
                var offsetX = canvas.offsetLeft, offsetY = canvas.offsetTop;
                var mousedown = false;
                function layer(ctx){
                    var img=document.getElementById("guaqian");
                    var pat=ctx.createPattern(img,"no-repeat");
                    ctx.fillStyle = pat;
                    //ctx.fillStyle = 'gray';
                    ctx.fillRect(0, 0, w, h);             
                }   
                function eventDown(e){
                    e.preventDefault();
                    mousedown=true;
                }
                function eventUp(e){
                    e.preventDefault();
                    mousedown=false;
                }
                function eventMove(e){
                    e.preventDefault();
                    if(mousedown){
                        if(e.changedTouches){
                            e=e.changedTouches[e.changedTouches.length-1];
                        }
                        var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
                        y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
                        with(ctx){
                            beginPath()
                            arc(x, y, 20, 0, Math.PI * 2);
                            fill();
                        }                
                    }             
                }               
                canvas.width=w;             
                canvas.height=h;             
                canvas.style.backgroundImage='url('+img.src+')';
                ctx=canvas.getContext('2d');
                ctx.fillStyle='transparent';
                ctx.fillRect(0, 0, w, h);
                layer(ctx);               
                ctx.globalCompositeOperation = 'destination-out';               
                canvas.addEventListener('touchstart', eventDown);             
                canvas.addEventListener('touchend', eventUp);             
                canvas.addEventListener('touchmove', eventMove);             
                canvas.addEventListener('mousedown', eventDown);             
                canvas.addEventListener('mouseup', eventUp);             
                canvas.addEventListener('mousemove', eventMove);       
            });

            img.src = 'http://trust.99mi.com/trust/gh.jpg';

        })(document.body.style);
        </script>
    </div>
    <p style="text-align:center; margin-top:10px;">亲爱的用户，感谢您对99mi商城的支持和信任</p>
    <p style="text-align:center; margin-top:10px;"><strong>如有任何问题，请咨询：400-010-9909</strong></p>
    <p class="trust_fhsy"><a href="http://m.99m.cn">回首页 >></a></p>
</div>


</body>
</html>

这个是刮层页面 http://trust.99mi.com/

来一个二维码：请输入图片描述