Jquery 更改使用画布创建的鼠标单击点_Jquery_Canvas_Mouseevent_Mouseclick Event

Jquery 更改使用画布创建的鼠标单击点

jquery canvas

Jquery 更改使用画布创建的鼠标单击点,jquery,canvas,mouseevent,mouseclick-event,Jquery,Canvas,Mouseevent,Mouseclick Event,我已经使用canvas和jquerymouseclick事件创建了点。当用户双击该点（已由鼠标单击事件创建）时，应根据鼠标光标的移动更改其位置。是否可以使用canvas和jquery？还是应该使用svg？下面是我的代码： <!DOCTYPE html> <html> <body> <p>mouseclick</p> <canvas id="canvas" width="500" height="500" style="c

我已经使用canvas和jquerymouseclick事件创建了点。当用户双击该点（已由鼠标单击事件创建）时，应根据鼠标光标的移动更改其位置。是否可以使用canvas和jquery？还是应该使用svg？下面是我的代码：

<!DOCTYPE html>

<html>

<body>

<p>mouseclick</p>

<canvas id="canvas" width="500" height="500" style="cursor:crosshair"></canvas>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>

$("#canvas").click(function(e){


  getPosition(e); 
 drawCoordinates(x,y);
});

var pointSize = 3;

function getPosition(event){


var rect = canvas.getBoundingClientRect();



var x = event.clientX - rect.left;



var y = event.clientY - rect.top;

 drawCoordinates(x,y);
}

function drawCoordinates(x,y,canvas){   



var ctx = document.getElementById("canvas").getContext("2d");


ctx.fillStyle = "#ff2626"; // Red color

ctx.beginPath();
ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
ctx.fill();
}

</script>

</body>

</html>


滑鼠夹