ничья круг в полотне с возможностью щелчка

Question

Я пишу этот яваскрипт код:

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

примечание: я делаю это с помощью jquery в html 4 и с помощью карты области, но я делаю не имеют никакой идеи в холсте.

Answer 1

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(); 

Answer 2

Я не могу сказать, хотите ли вы нарисовать круг, обнаружить щелчок мыши по кругу или и то, и другое.

Нарисуйте круг:

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 
}