无法使用画布中的 mousemove 事件处理程序在正确位置绘制矩形

Question

我正在尝试使用 canvas 进行 pong 克隆。然而，我似乎误解了坐标系在画布中如何处理事件。

我创建了一个playerPaddle 类。有了这个类，我希望将桨的中心准确地绘制在鼠标悬停的位置：

// Paddle Object
function Paddle( h, w, x, y, fill) {
    this.h = h;
    this.w = w;
    this.midH = h / 2;

    this.x = x;
    this.y = y;
    this.fill = fill;
}

Paddle.prototype.draw = function(ctx) {
    ctx.fillStyle = this.fill;
    ctx.fillRect(this.x, this.y, this.w, this.h);
}

Paddle.prototype.updatePos = function(y) {
    this.y = y - this.midH
}

我认为偏移桨的正确方法是使桨的中心位于mousemove 事件上，方法是通过从桨的新位置减去桨高度的一半来绘制矩形，就像我在做的那样上面的updatePos 方法。

但是，这似乎无法正常工作，因为它正在将我的桨的顶部准确地绘制在 mousemove 事件发生的位置。

如果我从事件的 y 位置减去 this.h 会起作用，这对我来说绝对没有意义。

下面是我用来实例化 paddle、将事件处理程序添加到 canvas 元素本身的代码，以及我用来渲染所有内容的函数。

// Paddle Globals
var paddleHeight = 50,
    paddleWidth = 10,
    paddleOffset = 10;
var playerPaddle = new Paddle( paddleHeight, paddleWidth, paddleOffset, midY, '#FFFFFF');

// Does the actual rendering
function render() {
    ctx.clearRect(0, 0, cWidth, cHeight);
    playerPaddle.draw(ctx);
}

//Event Handlers
canvas.addEventListener('mousemove', function(e) {
    e.preventDefault();
    var position = canvas.getBoundingClientRect();
    var y = e.clientY - position.top;
    playerPaddle.updatePos(y);
}, false);

这里还有一个我描述的行为示例：http://jsfiddle.net/u57QD/

Answer 1

我想我解决了这个问题。 尝试删除 Canvas 上的 css 样式。 我认为 padding-top 让你向下画布。所以看起来 y - this.midH 不起作用：D 祝你好运

删除样式表中的后续代码行

padding-top: 20px;