javascript - 在线等，急！！为什么我这个触屏 canvas画线的程序代码触屏的位置跟画画的位置对不上？我在google浏览器上测试的。-PHP 중국어 네트워크 Q&A

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

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼