Рисование круга на холсте с помощью событий мыши

Question

Я пытаюсь нарисовать круг, используя мышь, на холсте, используя события мыши, но он ничего не рисует:

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

Что я делаю не так?

Answer 1

Ну, этот фрагмент кода мало что нам говорит, но в вашем коде есть пара очевидных ошибок.Во-первых, объект DOM Event не имеет свойств _ x и _ y.а точнее clientX и clientY или pageX и pageY.Чтобы получить относительные координаты мыши из текущего объекта события, вы должны сделать что-то вроде:

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

Далее, 2d контекст canvas не имеет метода с именем circle, но вы можете написать свой собственный,может быть что-то вроде:

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

В любом случае, вот тестовая html-страница, чтобы проверить это: http://jsfiddle.net/ArtBIT/kneDX/

Надеюсь, это поможет.Приветствия