Javascript 如何控制我的圆圈的位置？_Javascript_Html5 Canvas_Drawing

Javascript 如何控制我的圆圈的位置？

javascript html5-canvas

Javascript 如何控制我的圆圈的位置？,javascript,html5-canvas,drawing,Javascript,Html5 Canvas,Drawing,所以，我用代码复仇者来学习如何制作游戏。它最近教我如何使用onMouseDown和其他一些类似的东西。它向我展示了当我单击、拖动鼠标或其他类似的东西时，使用哪些属性来显示或发生某些事情。我设法以一种在记事本++上工作的方式重新创建了它，但有一部分我真的不知道怎么做。我如何使圆圈出现在我单击鼠标的地方，而不是仅仅出现在角落里这是我的密码 <!DOCTYPE html> <html> <body> <canvas id = "gameCanvas" wid

所以，我用代码复仇者来学习如何制作游戏。它最近教我如何使用onMouseDown和其他一些类似的东西。它向我展示了当我单击、拖动鼠标或其他类似的东西时，使用哪些属性来显示或发生某些事情。我设法以一种在记事本++上工作的方式重新创建了它，但有一部分我真的不知道怎么做。我如何使圆圈出现在我单击鼠标的地方，而不是仅仅出现在角落里

这是我的密码

<!DOCTYPE html>
<html>
<body>
<canvas id = "gameCanvas" width="500" height="500" style="border:4px solid 
black"></canvas>
<script type = "text/javascript">
var myCanvas = document.getElementById("gameCanvas");
var ctx = myCanvas.getContext("2d");

window.onmousedown = function(event){
  ctx.beginPath();
  ctx.arc(100,75,50,0,2*Math.PI);
  ctx.stroke();
}
</script>
</body>
</html>


var myCanvas=document.getElementById（“gameCanvas”）；
var ctx=myCanvas.getContext（“2d”）；
window.onmousedown=函数（事件）{
ctx.beginPath（）；
ctx.arc（100,75,50,0,2*Math.PI）；
ctx.stroke（）；
}

需要获取事件的鼠标clientX和clientY坐标，并将圆的（x，y）坐标设置为它们

ctx.arc(event.clientX, event.clientY, 50, 0, 2*Math.PI);