如何控制我的圈子的位置？

Question

所以，我正在使用 CodeAvengers 来学习如何制作游戏。它最近教会了我如何使用 onMouseDown 和其他一些类似的东西。它向我展示了在我单击、拖动鼠标或其他类似操作时使用哪些属性来使某些东西出现或发生。我设法以一种可以在 Notepad ++ 上运行的方式重新创建它，但是有一部分我真的不知道该怎么做。如何让圆圈出现在我单击鼠标的位置，而不是只在角落弹出？

这是我的代码

<!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>

Answer 1

需要获取事件的鼠标 clientX 和 clientY 坐标并将圆的 (x,y) 坐标设置为它们。

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

如何控制我的圈子的位置？

How to control the location of my circle?

javascript

drawing

html5-canvas