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

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

javascript canvas

Javascript 与画布中随机创建的圆交互,javascript,canvas,Javascript,Canvas,我正在尝试制作一个代码，在这个代码中，随机圆圈会出现在屏幕上，用户必须单击它们才能让它们消失。我目前在与我的圈子互动方面有问题我已经编写了一个与画布交互的代码，但似乎不知道如何与圆圈交互。我不确定“clickCircle”功能放在哪里，以及以后如何调用它这是我的代码： <!DOCTYPE html> <html> <head> <title></title> </head> <body> <

我正在尝试制作一个代码，在这个代码中，随机圆圈会出现在屏幕上，用户必须单击它们才能让它们消失。我目前在与我的圈子互动方面有问题

我已经编写了一个与画布交互的代码，但似乎不知道如何与圆圈交互。我不确定“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>


#帆布{
显示：内联；
利润率：汽车；
背景色：浅蓝色；}
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
函数随机化（）{
变量半径=数学地板（数学随机（）*30）+5；
var x=数学地板（数学随机（）*600）+50；
变量y=数学地板（数学随机（）*400）+50；
拉深圆（x，y，半径）；
var指数=0；
函数绘图圆（x、y、半径）{
ctx.beginPath（）；
ctx.弧（x，y，半径，0,2*Math.PI）；
ctx.stroke（）；
ctx.closePath（）；
ctx.fillStyle='红色'；
ctx.fill（）；
函数clickCircle（）{
console.log（'Clicked circle'）；}
}
}
var intervall=设置间隔（随机，1000）；
canvas.addEventListener（'click'，（）=>{
“？”。单击圆形（）；
log（'Clicked canvas'）；
});

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

另外，您不需要

“？”。

要调用

clickCanvas（）

函数，只需将其删除即可


#帆布{
显示：内联；
利润率：汽车；
背景色：浅蓝色；}
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
函数随机化（）{
变量半径=数学地板（数学随机（）*30）+5；
var x=数学地板（数学随机（）*600）+50；
变量y=数学地板（数学随机（）*400）+50；
拉深圆（x，y，半径）；
变量索引=0；}
函数绘图圆（x、y、半径）{
ctx.beginPath（）；
ctx.弧（x，y，半径，0,2*Math.PI）；
ctx.stroke（）；
ctx.closePath（）；
ctx.fillStyle='红色'；
ctx.fill（）；}
函数clickCircle（）{
console.log（'Clicked circle'）；}
var intervall=设置间隔（随机，1000）；
canvas.addEventListener（'click'，（）=>{
单击圆圈（）；
log（'Clicked canvas'）；
});

您是否在问“我如何判断哪些随机生成的圆圈被点击了？”