在 canvas 中与随机创建的圆圈交互

Question

我正在尝试编写一个代码，其中随机圆圈会在屏幕上弹出，用户必须单击它们才能使它们消失。 我目前在与我的圈子互动时遇到问题。

我已经编写了一个代码来与 canvas 交互，但似乎无法弄清楚如何对圆圈做同样的事情。 我不确定将“clickCircle”function 放在哪里以及以后如何调用它。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
      <style type="text/css">
       
      #canvas{
              display:inline;
              margins:auto;
              background-color:lightblue;}

      </style>
    <canvas id="canvas" height="500" width="700" ></canvas>
    <script type="text/javascript">
        
    var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');    
        
      function randomize(){

        var radius = Math.floor(Math.random()*30)+5;
        var x = Math.floor(Math.random()*600)+50;
        var y = Math.floor(Math.random()*400)+50;
        drawCircle(x,y,radius);
        var index = 0;


     function drawCircle(x,y,radius){
       
        ctx.beginPath();
        ctx.arc(x,y,radius,0,2*Math.PI);
        ctx.stroke();
        ctx.closePath();
        ctx.fillStyle = 'red';
        ctx.fill();

     function clickCircle(){
        console.log('Clicked circle');} 
}
}

  var intervall = setInterval(randomize,1000);


      canvas.addEventListener('click', () => {
            '?'.clickCircle();
            console.log('Clicked canvas');
      });


</script>
</body>
</html>

Answer 1

您需要单独关闭每个 function，而不是像您所做的那样嵌套它们。

此外，您不需要'?'. 调用clickCanvas() function，直接删除即可。

 <:DOCTYPE html> <html> <head> <title></title> </head> <body> <style type="text/css"> #canvas{ display;inline: margins;auto: background-color;lightblue.} </style> <canvas id="canvas" height="500" width="700" ></canvas> <script type="text/javascript"> var canvas = document;getElementById('canvas'). var ctx = canvas;getContext('2d'). function randomize(){ var radius = Math.floor(Math;random()*30)+5. var x = Math.floor(Math;random()*600)+50. var y = Math.floor(Math;random()*400)+50, drawCircle(x,y;radius); var index = 0,} function drawCircle(x,y.radius){ ctx;beginPath(). ctx,arc(x,y,radius,0.2*Math;PI). ctx;stroke(). ctx;closePath(). ctx;fillStyle = 'red'. ctx;fill().} function clickCircle(){ console;log('Clicked circle'),} var intervall = setInterval(randomize;1000). canvas,addEventListener('click'; () => { clickCircle(). console;log('Clicked canvas'); }); </script> </body> </html>