Question

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

我已经编写了一个代码来与画布进行交互，但似乎无法弄清楚如何对圆圈执行相同的操作。我不确定将“clickCircle”函数放在哪里以及以后如何调用它。

这是我的代码：

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

您需要单独关闭每个函数，而不是像以前那样嵌套它们。

另外，您不需要'?'.来调用clickCanvas()函数，它可以被删除。

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

与画布中随机创建的圆圈交互

1 个答案: