Rysowanie okręgu na płótnie przy użyciu zdarzeń myszy

Question

Próbuję narysować okrąg za pomocą myszki na płótnie przy użyciu zdarzenia myszy, ale to niczego nie pociągnie

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

Co robię źle?

Answer 1

Cóż, ten fragment kodu niewiele nam mówi, ale w Twoim kodzie jest kilka oczywistych błędów. Po pierwsze obiekt zdarzenia DOM nie ma właściwości _ x i _ y. ale raczej clientX i clientY lub pageX i pageX i pageX. koordynuje Aby uzyskać względny mysz z bieżącego obiektu zdarzenia, byś zrobił coś takiego:

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

Następnie 2d kontekst Płótnie nie posiada metoda zwana circle, ale można napisać swój własny, może coś podobnego :

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

Tak czy inaczej, oto strona testowa html przetestować to na zewnątrz: http://jsfiddle.net/ArtBIT/kneDX/

mam nadzieję, że to pomaga. Cheers