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

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>

在这段代码中，我通过鼠标点击检测坐标。我想在这个坐标周围画一个圆圈，当我点击 circle 时，做一些事情（例如打开 google.com）

注意：我使用 html 4 中的 jquery 和区域图执行此操作，但我在画布中没有任何想法。

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
}

Answer 2

  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 70;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#003300';
  context.stroke();