Question

我是画布的新手，你能解决我的问题吗

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

我需要实现，

用户在blueRectangle后面点击greyBall，我需要停止灰球运动。

在这里找到代码

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

https://jsfiddle.net/om0n8qka/1/

我的代码： https://jsfiddle.net/kqsLwb80/

我找到了解决方案的答案，更新的代码在这里https://jsfiddle.net/lannymcnie/kqsLwb80/10/ 现在怎么能清除灰球路径。只需要显示圆圈而不是他的路径

Answer 1

大多数情况下，这个问题与其他问题类似： How do I add a simple onClick event handler to a canvas element?

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

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

我添加了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);
                }
        }
});

和distance是明显的2D距离公式：

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

这是你修改过的jsfiddle：https://jsfiddle.net/nfyr05h1/3/

请注意，在圈子移动时单击圆圈并不容易，因为点击事件管理会拦截上行按钮事件，而当例程很快时，在圆圈仍在移动时仍需要几毫秒的时间来计算。 / p>

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

现在，如果你想添加代码来检查点击的圆圈是否在蓝色矩形的后面，你必须自己做。然而，这是必须如何完成的。

如何单击背景画布并触发一个功能

1 个答案: