使用鼠标事件在画布上绘制圆形

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

我做错了什么？

- Nitesh

Answer 1

嗯，这段代码片段并没有给我们提供太多信息，但是你的代码中有一些明显的错误。 首先，DOM事件对象没有 _x 和 _y 属性，而是 clientX 和 clientY 或者 pageX 和 pageY。 要从当前事件对象获取相对鼠标坐标，你可以这样做：

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

接下来，canvas的2d上下文没有一个叫做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/。

希望这能帮到你。 干杯

- ArtBIT

---

并不完全是我想要的，但确实帮助我理解了如何使用鼠标事件来实现我想要的圆形操作。 - Nitesh

你能分享一下鼠标事件列表吗？就像在 jSFiddle 中，我们有 onmouseover 事件一样，我们是否有其他事件的文档记录列表？ - Imad Alazani

@PKKG 在这里阅读有关DOM事件（包括鼠标事件）的更多信息：http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mouseevents - ArtBIT