Question

我有一个画布分层在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和canvas的分层正在丢失，但我将它定位在其他地方并没有这不是问题。

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

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是当前选择的坐标。

任何想法在这里有什么问题？

Answer 1

为什么不重新考虑

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

我的猜测是，如果x和y是正确的，执行顺序可能就在你的路上。

在不同的x，y位置画布上重新绘制矩形

1 个答案: