javascript - Masalah dengan mendapatkan koordinat tetikus dalam kanvas

Saya ingin mencipta kesan lukisan garisan dengan tetikus, yang serupa dengan fungsi lukisan garisan papan lukisan yang disertakan dengan tingkap. Ini memerlukan mendapatkan koordinat tetikus, tetapi saya sentiasa merasakan bahawa koordinat tidak diperoleh dengan tepat Setiap kali saya melukis garisan pada kanvas, garisan itu sentiasa dilukis dengan jelas di bawah kursor, bukan dari kedudukan kursor melukis garisan. Jika anda melukis garisan di bahagian bawah kanvas dan ia tidak boleh keluar sama sekali, nilai koordinat sebenar yang diperoleh mungkin melebihi saiz kanvas. Mungkinkah kaedah saya untuk mendapatkan nilai koordinat adalah salah? Saya ingin bertanya kepada semua orang!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style> body {
        background: #000;
    } </style>
    <script> window.onload = function () {
        var oC = document.getElementById('cav');
        var ctx = oC.getContext('2d');
        oC.onmousedown = function (evt) {
            var x = evt.pageX - oC.offsetLeft;
            var y = evt.pageY - oC.offsetTop;
            ctx.moveTo(x, y);
            oC.onmousemove = function (evt) {
                var x = evt.pageX - oC.offsetLeft;
                var y = evt.pageY - oC.offsetTop;
                ctx.lineTo(x, y);
                ctx.stroke();
            }
            oC.onmouseup = function () {
                oC.onmousemove = null
            }
        }
    } </script>
</head>
<body>
<canvas id="cav" style="width: 400px;height: 400px;background: white"></canvas>
</body>
</html>

过去多啦不再A梦2750 hari yang lalu582

javascript - Masalah dengan mendapatkan koordinat tetikus dalam kanvas

membalas semua(1)saya akan balas