Html 选择坐标点时，在画布中显示选定的空间_Html_Canvas_Coordinate

Html 选择坐标点时，在画布中显示选定的空间

html canvas

Html 选择坐标点时，在画布中显示选定的空间,html,canvas,coordinate,Html,Canvas,Coordinate,当单击坐标画布时，显示一个点，当再次单击时，显示一个点，但我想在选择“下一步”（单击）时删除上一个点，请帮助我解决这个问题，我也在尝试用jquery来解决这个问题，但这也不合适，我也在尝试使用“clearRec”方法，但是它同时删除坐标图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content

当单击坐标画布时，显示一个点，当再次单击时，显示一个点，但我想在选择“下一步”（单击）时删除上一个点，请帮助我解决这个问题，我也在尝试用jquery来解决这个问题，但这也不合适，我也在尝试使用“clearRec”方法，但是它同时删除坐标图

<!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>
        #cordCanvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <div id=container>
        <canvas id="cordCanvas" width="150" height="150" onclick="draw(event); showCoords(event);"></canvas>
    </div>

    <p id='showCoords'></p>
    <script>
        var cordCanvas = document.getElementById("cordCanvas");
        var context = cordCanvas.getContext("2d");

        function draw(e) {
            var pos = getMousePos(cordCanvas, e);
            posx = pos.x;
            posy = pos.y;
            // context.clearRect(0, 0, cordCanvas.width, cordCanvas.height);

            context.fillStyle = "#000000";
            context.beginPath();
            context.arc(posx, posy, 2, 0, 2 * Math.PI);
            context.fill();

        }

        function getMousePos(cordCanvas, evt) {
            var rect = cordCanvas.getBoundingClientRect();
            return {
                x: evt.clientX - rect.left,
                y: evt.clientY - rect.top
            };
        }
        window.onload = drawCord;
        function drawCord() {
            var cordCanvas = document.getElementById('cordCanvas');
            if (cordCanvas.getContext) {
                var context = cordCanvas.getContext('2d');

                for (var x = 0.5; x < 150; x += 15) {
                    context.moveTo(x, 0);
                    context.lineTo(x, 150);
                }

                for (var y = 0.5; y < 150; y += 15) {
                    context.moveTo(0, y);
                    context.lineTo(150, y);
                }

                context.strokeStyle = '#00abff';
                context.stroke();
            }
        }

        function showCoords(event) {
            var x = event.clientX - 10;
            var y = event.clientY - 10;
            var coords = "X coordinates: " + x + ", Y coordinates: " + y;
            document.getElementById('showCoords').innerHTML = coords;

        }
    </script>
</body>

</html>


文件
#绳索帆布{
边框：1px纯黑；
}

var cordCanvas=document.getElementById（“cordCanvas”）；
var context=cordCanvas.getContext（“2d”）；
功能图（e）{
var pos=getMousePos（cordCanvas，e）；
posx=pos.x；
posy=pos.y；
//clearRect（0，0，cordCanvas.width，cordCanvas.height）；
context.fillStyle=“#000000”；
context.beginPath（）；
arc（posx，posy，2，0，2*Math.PI）；
context.fill（）；
}
函数getMousePos（cordCanvas，evt）{
var rect=cordCanvas.getBoundingClientRect（）；
返回{
x:evt.clientX-rect.left，
y:evt.clientY-rect.top
};
}
window.onload=抽绳；
函数drawCord（）{
var cordCanvas=document.getElementById（'cordCanvas'）；
if（cordCanvas.getContext）{
var context=cordCanvas.getContext（'2d'）；
对于（var x=0.5；x<150；x+=15）{
moveTo（x，0）；
lineTo（x，150）；
}
对于（变量y=0.5；y<150；y+=15）{
上下文。移动到（0，y）；
lineTo（150，y）；
}
context.strokeStyle='#00abff'；
stroke（）；
}
}
函数showCoords（事件）{
var x=event.clientX-10；
var y=event.clientY-10；
var coords=“X坐标：”+X+”，Y坐标：“+Y；
document.getElementById（'showCoords'）。innerHTML=coords；
}