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样式。我认为填充顶部会让你向下画布。所以它看起来像y - this.midH不起作用：D祝你好运

删除样式表中的以下代码行

padding-top: 20px;

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

1 个答案: