javascript - 在线等，急！！为什么我这个触屏 canvas画线的程序代码触屏的位置跟画画的位置对不上？我在google浏览器上测试的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>canvas</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas width="" height="" style="background: black;vertical-align: middle;" id="can">您的浏览器不支持CANVAS，请更新最新版浏览器。</canvas>
</body>
    <!--<script src="js/zepto.V1.1.6.min.js" type="text/javascript"></script>-->
    <!--<script src="js/zepTouch.js" type="text/javascript"></script>-->
    <script type="text/javascript">
        var can = document.getElementById('can');
        var cxt = can.getContext('2d');

        var windowWidth;
        var windowHeight;
        function resizeWindow(){
            windowWidth = window.innerWidth;
            windowHeight = window.innerHeight;
//            console.log(windowWidth);
//            console.log(windowHeight);
            can.style.width = windowWidth+'px';
            can.style.height = windowHeight+'px';
        }

        resizeWindow();
        window.onresize=function(){
            resizeWindow();
        }

        var moveX;
        var moveY;
        var drawDot = [];

       function draw(moveX,moveY,arry){
           cxt.clearRect(0,0,windowWidth,windowHeight);
           cxt.strokeStyle='#fff';
           cxt.lineWidth=2;
           cxt.beginPath();
           cxt.moveTo(moveX,moveY);
           for(var i =0;i<arry.length;i++){
               cxt.lineTo(arry[i].x,arry[i].y);
           }
           cxt.stroke();
       }

        can.addEventListener('touchstart',function(e){
            var event = e||window.event;
            var touch = event.touches[0];

            moveX = touch.pageX;
            moveY = touch.pageY;
            console.log(moveX+' '+moveY);
        },false);

        can.addEventListener('touchmove',function(e){
            var event = e||window.event;
            var touch = event.touches[0];
            var touchDot ={};
            touchDot.x = touch.pageX;
            touchDot.y = touch.pageY;
            console.log(touchDot);
            drawDot.push(touchDot);
            draw(moveX,moveY,drawDot);

        });
    </script>
</html>

高洛峰2774 hari yang lalu737

javascript - 在线等，急！！为什么我这个触屏 canvas画线的程序代码 触屏的位置 跟画画的位置对不上？我在google浏览器上测试的。

membalas semua(0)saya akan balas

javascript - 在线等，急！！为什么我这个触屏 canvas画线的程序代码触屏的位置跟画画的位置对不上？我在google浏览器上测试的。