javascript - 使用单击选项在 Canvas 中绘制圆圈

Question

我写了这段 javascript 代码:

<script>
        var canvas = document.getElementById("canvas");
        var canvasOffset = $("#canvas").offset();
        var offsetX = canvasOffset.left;
        var offsetY = canvasOffset.top;

        function handleMouseDown(e) {
            mouseX = parseInt(e.clientX - offsetX);
            mouseY = parseInt(e.clientY - offsetY);
            $("#downlog").html("Down: " + mouseX + " / " + mouseY);
        }

        $("#canvas").mousedown(function(e) {
            handleMouseDown(e);
        });

    </script>

在此代码中，我通过单击鼠标检测坐标。 我想围绕这个坐标画一个圆圈，当我点击圆圈时，做一些事情(例如打开 google.com)

注意:我在 html 4 中使用 jquery 和区域 map 执行此操作，但我对 canvas 没有任何想法。

Answer 1

我不知道你是想画一个圆圈，还是检测鼠标在圆圈中的点击，或者两者兼而有之。

画一个圆:

var context=canvas.getContext("2d");
ctx.beginPath();

//Draw a circle around a mouse click
//ctx.arc(x-position, y-position, radius, start-angle, end-angle);
ctx.arc(mouseX, mouseY, 30, 0, 2*Math.PI);
ctx.stroke();

检测圆圈内的鼠标点击:

//circleX and circleY are the coordinats of the center
var y = mouseY - circleY;
var x = mouseX - circleX;
var dist = Math.sqrt(y*y + x*x);

if (dist < circleRadius) {
  // Do whatever you want to do
}