1

我有一个覆盖在 div 上的画布，我试图在加载时在位置 0、0 处绘制一个矩形，并在需要时将其移动到另一个位置 x、y。我需要的 x、y 位置正在完美返回，clearRect(0, 0, canvas.width, canvas.height)当我需要移动并使用fillRect(x, y, width, height)再次在这些特定位置重绘时，我正在使用该方法清除画布。但是，尽管 x、y 位置很好并且正在调用 fillRect(..)（我在 chrome 中调试），但只有当我在位置 0、0 处重新绘制它时，矩形才会被移除和绘制。否则它只会被移除。起初我以为它正在被绘制，但可能 div 和画布的分层正在丢失，但我将它放置在其他地方，不，这不是问题。

这是我的代码，也许有人会在我的代码中看到一些错误！谢谢

function removeCursor(connectionId) {
     var canvas = document.getElementById(connectionId);
     var ctx = canvas.getContext('2d');

     ctx.clearRect(0, 0, canvas.width, canvas.height); 
}

function paintCursor(x, y, connectionId, color) {
     var canvas = document.getElementById(connectionId);
     var context = canvas.getContext('2d');
     context.fillStyle = color;
     context.fillRect(x, y, 0.75, 5);
}

// the canvas is created on someone connecting to a specific page
if (someoneConnected) {
    var canvas = document.createElement("canvas");
    canvas.id = connectionId;
    canvas.className = 'canvases';
    canvas.style.zIndex = zindex;
    zindex++;

    var parentDiv = document.getElementById("editor-section");
    parentDiv.appendChild(canvas);

    paintCursor(0, 0, connectionId, color);

} else { // someone disconnected

    var canvas = document.getElementById(connectionId);
    canvas.parentNode.removeChild(canvas);
}

我调用方法removeCursor(connectionId)和paintCursor(x, y, connectionId, color)用户事件，例如按键和单击。X, Y 是当前选择的坐标。

有什么想法吗？

4

1 回答 1

0

Why don't you re-factor to

function rePaintCursor(x, y, connectionId, color) {
    var canvas = document.getElementById(connectionId);
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.fillStyle = color;
    context.fillRect(x, y, 0.75, 5);
}

my guess is that, if x and y are correct, the execution order might be in your way.

于 2013-09-06T00:31:56.450 回答