Canvas 如何单击背景画布并触发函数

我是画布新手，你能回答我的问题吗

我使用两个画布层，顶层画布（蓝色矩形）和底层画布（灰色球）。灰球随机移动，蓝矩形静止在某个位置

我需要实现

当灰球位于blueRectangle后面时，用户单击灰球，我需要 停止灰球运动

在这里查找代码

  <section>
     <div id="kanvas" style="position:relative; width:400px; height:300px">
        <canvas id="layer1"
           style="z-index: 1;position:absolute;left:0px;top:0px;" height="300px" width="400">
        </canvas>
        <canvas width="100" height="100" style="z-index: 2;pointer-events: none;position:absolute;left:50%;top:50%;" id="layer2">
        </canvas>
     </div>
     <script type="text/javascript">
        var layer1;
        var layer2;
        var ctx1;
        var ctx2;
        var x = 400;
        var y = 300;
        var dx = 2;
        var dy = 4;
        var WIDTH = 400;
        var HEIGHT = 300;

        function init() {
            //city.src ="city.png";
            layer1 = document.getElementById("layer1");
            ctx1 = layer1.getContext("2d");
            layer2 = document.getElementById("layer2");
            ctx2 = layer2.getContext("2d");
            //drawAll();
            setInterval(drawAll, 0.5);
        }

        function drawAll() {
            drawBall();
            drawRectangle();
        }

        function drawBall() {
            ctx1.clearRect(0, 0, WIDTH, HEIGHT);
            ctx1.fillStyle = "#444444";
            ctx1.beginPath();
            ctx1.arc(x, y, 50, 0, Math.PI*2, true);
            //ctx1.arc(x, y, 100, 0, Math.PI*2, true);
            ctx1.closePath();
            ctx1.fill();

            if (x + dx > WIDTH || x + dx < 0)
            dx = -dx;
            if (y + dy > HEIGHT || y + dy < 0)
            dy = -dy;

            x += dx;
            y += dy;
        }
        function drawRectangle() {
            ctx2.clearRect(0, 0, WIDTH, HEIGHT);
            ctx2.fillStyle = "blue";
            ctx2.save();
            ctx2.translate(20,20);
            //ctx2.rotate(x/20);
            ctx2.fillRect(-15, -15, 100, 100);
            ctx2.restore();
        }
        init();
     </script>
  </section>

var层1；
var层2；
var-ctx1；
var-ctx2；
var x=400；
变量y=300；
var-dx=2；
var-dy=4；
var宽度=400；
var高度=300；
函数init（）{
//city.src=“city.png”；
layer1=document.getElementById（“layer1”）；
ctx1=layer1.getContext（“2d”）；
layer2=document.getElementById（“layer2”）；
ctx2=layer2.getContext（“2d”）；
//drawAll（）；
设定时间间隔（drawAll，0.5）；
}
函数drawAll（）{
牵引杆（）；
drawRectangle（）；
}
函数{
ctx1.clearRect（0，0，宽度，高度）；
ctx1.fillStyle=“#4444”；
ctx1.beginPath（）；
ctx1.弧（x，y，50，0，数学π*2，真）；
//ctx1.弧（x，y，100，0，数学π*2，真）；
ctx1.closePath（）；
ctx1.fill（）；
如果（x+dx>宽度| | x+dx<0）
dx=-dx；
如果（y+dy>高度| | y+dy<0）
dy=-dy；
x+=dx；
y+=dy；
}
函数drawRectangle（）{
ctx2.clearRect（0，0，宽度，高度）；
ctx2.fillStyle=“蓝色”；
ctx2.save（）；
ctx2.翻译（20,20）；
//ctx2.旋转（x/20）；
ctx2.fillRect（-15，-15100100）；
ctx2.restore（）；
}
init（）；

我的工作代码：

我已经找到了解决方案的答案，更新的代码在这里

---

现在，我们如何才能清除灰球路径。只需要显示圆圈而不是他的路径大部分情况下，这个问题与另一个类似：

也就是说，您正在询问如何将onclick添加到canvas元素。答案很简单：你不能

复杂的答案是：将事件侦听器添加到封闭的画布中，然后进行一些计算，以查看单击是否与相关元素相交

我添加了jQuery以方便单击管理：

$("#layer1").click(function(e){
        if(distance(x,y,e.offsetX, e.offsetY) < 2*radius) {
                if(interval) {  
                        clearInterval(interval);
                        interval = null;
                }
                else {
                        interval = setInterval(drawAll, 0.5);
                }
        }
});

这是您修改的JSFIDLE：

请注意，在圆移动时单击圆并不容易，因为单击事件管理会截获向上按钮事件，并且虽然例程速度很快，但在圆移动时仍需要几毫秒的时间进行计算

这意味着您单击时，实际接受的目标区域稍微位于圆的前面。为了克服这个问题，我在一个更大的圆（2*半径）中接受点击

---

现在，如果您想添加代码来检查单击的圆是否位于蓝色矩形的后面，您必须自己做。但是，这是必须做到的。

您可以制作复杂的画布动画，但不能编写单击事件管理器？@a.Rama您可以分享一些示例吗？我使用createjs更新了代码。现在我可以在圆圈上找到单击事件。但现在，即使我点击圆的路径，圆的运动也停止了。查看我的代码：

function distance(x1,y1,x2,y2) {
    return Math.sqrt(Math.pow(x2-x1, 2) + Math.pow(y2-y1, 2));
}