canvas 畫線位置出錯的問題

1.描述問題：
控制臺輸出的鼠標(biāo)位置和鼠標(biāo)相對canvas的位置是正確的，但是畫出的線不對，在canvas的上方還好，在中下部畫線的Y坐標(biāo)明顯偏大，大概是（正確數(shù)值/實際數(shù)值 == 80%）；
有沒有大佬給講解下；

2.代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin: 0;padding: 0;}
    .box{
        width: 500px;height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgb(219, 14, 14);
        }
    #pic{ 
        width: 300px;height: 200px; 
        background-image:url( "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1517329408914&di=d29633a6684f409a693882575e37793e&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201308%2F01%2F20130801135423_sem2F.jpeg");
    }
    #canvas{
        width: 300px;height: 200px;
    }
    </style>
</head>
<body>
    <div class = "box">
        <div id = "pic"> 
            <canvas id = "canvas"></canvas>
        </div>
    </div>
    <script>
        const canvas = document.getElementById("canvas");
        const crx = canvas.getContext("2d");
        let pointArry = [];
        let [xPoint,yPoint] = [0,0];
        let isDown = false;

        
        crx.beginPath();
        crx.fillStyle = "#939393"
        crx.fillRect(0,0,300,200);
        crx.fill();

        canvas.addEventListener("mousedown",function(){
            const e = window.event||event;
            isDown = true;
            xPoint = e.clientX - this.offsetLeft;
            yPoint = e.clientY - this.offsetTop ;
            console.log("top:"+this.offsetTop,"clienty:"+e.clientY);
            pointArry.push([xPoint,yPoint]);
            clearPoint(crx);
        })


        canvas.addEventListener("mousemove",function(){
            const e = window.event || event;
           if(isDown){
            xPoint = e.clientX - this.offsetLeft;
            yPoint = e.clientY - this.offsetTop ;
            console.log("clientx:"+e.clientX,"clienty:"+e.clientY);
            pointArry.push([xPoint,yPoint]);
            clearPoint(crx);
           } 
        })
        
        canvas.addEventListener("mouseup",function(){
            isDown = false;
            pointArry = [];
        })

        canvas.addEventListener("mouseout",function(){
            isDown = false;
            pointArry = [];
        })

        function clearPoint(crx){
            crx.beginPath();
            crx.moveTo(pointArry[0][0],pointArry[0][1]);
            crx.lineWidth = 30;
            crx.lineCap = "round";//設(shè)置線條兩端為圓弧
            crx.lineJoin = "round";//設(shè)置線條轉(zhuǎn)角為圓弧
            crx.globalCompositeOperation = "destination-out";;
            console.log(pointArry);
            
            if ( pointArry.length == 1){
                crx.lineTo(pointArry[0][0] + 1,pointArry[0][1] + 1)
            }else{
                for (let i = 1; i< pointArry.length;i++){
                crx.lineTo(pointArry[i][0],pointArry[i][1]);
                }
            }         
            crx.stroke();
        }
    </script>
</body>
</html>

回答

編輯回答

晚風(fēng)眠

canvas元素是置換元素，需要設(shè)置其width和height屬性。<canvas id = "canvas" width="200" height="300"></canvas>必須設(shè)置其width 和height屬性，設(shè)置css的width 和height就會出現(xiàn)像素模糊。想知道具體原因，可以百度。

2017年3月3日 09:41