dibuja un círculo en el lienzo con eventos de ratón

Question

que estoy tratando de dibujar un círculo con el ratón en el lienzo con eventos de ratón, pero no saca nada:

tools.circle = function() { 
var tool = this; 
this.started = false; 
this.mousedown = function (ev) { 
tool.started = true; 
tool.x0 = ev._x; 
tool.y0 = ev._y; 
ctx.moveTo(tool.x0,tool.y0); 
}; 

this.mousemove = function (ev) { 
var centerX = Math.max(tool.x0,ev._x) - Math.abs(tool.x0 - ev._x)/2; 
var centerY = Math.max(tool.y0,ev._y) - Math.abs(tool.y0 - ev._y)/2; 
var distance = Math.sqrt(Math.pow(tool.x0 - ev._x,2) + Math.pow(tool.y0 - ev._y)); 
context.circle(tool.x0, tool.y0, distance/2,0,Math.PI*2 ,true); 
context.stroke(); 
}; 
}; 

¿Qué estoy haciendo mal?

Answer 1

Bueno, este fragmento de código no nos dice mucho, pero hay un par de errores obvios en su código. Primero, el objeto Evento DOM no tiene las propiedades _ x y _ y. sino más bien clientX y clientY o pageX y pageY. ratón para obtener las coordenadas relativa del objeto de evento actual, debería hacer algo como:

element.onclick = function(e) { 
    var x = e.pageX - this.offsetLeft; 
    var y = e.pageY - this.offsetTop; 
} 

A continuación, el contexto 2d lienzo no tiene un método llamado circle, pero usted puede escribir su propia, tal vez algo como :

var ctx = canvas.context; 
ctx.fillCircle = function(x, y, radius, fillColor) { 
    this.fillStyle = fillColor; 
    this.beginPath(); 
    this.moveTo(x, y); 
    this.arc(x, y, radius, 0, Math.PI*2, false); 
    this.fill(); 
} 

de todos modos, aquí hay una página hTML de prueba para probar esto: http://jsfiddle.net/ArtBIT/kneDX/

espero que esto ayude. Cheers