Question

我将此绑定到画布的mousemove事件：

function(e){        
    var contDiv = $('#current_system_map'); 
    var offset = contDiv.offset();
    x = e.clientX-offset.left;
    y = e.clientY-offset.top;
    context.beginPath();
    context.moveTo(0,y);
    context.lineTo(595,y);
    context.moveTo(x,0);
    context.lineTo(x,595);
    context.strokeStyle = "rgb(255,255,255)";
    context.stroke();   
}

它工作得很好，到了一定程度。绘制的十字架是持久的，所以当鼠标移动时，会绘制一个新的十字架但旧的十字架仍然存在。我已经尝试过重新绘制画布，但这会导致十字架滞后并远离鼠标。

所以我需要知道如何绘制十字架并使其不显示而不必在画布上重新绘制所有内容

Answer 1

http://jsfiddle.net/PgKEt/2/ 这是我能做的最好的事情。如果你尝试使用setInterval等来为它设置动画，即使它不需要也会继续重绘。因此，通过这样做，您基本上只在鼠标移动时重绘，并且只绘制2行，而不是您想要的任何内容。

此外，如果您有任何检测，例如mousedown等，它必须位于顶部的任何画布上，否则它将不再检测到它们。

Answer 2

通常，如果您在画布上绘制某些内容，则必须重新绘制画布内容以将其删除。我建议你使用一个图像元素作为光标，并将它放在

之上

或者您可以尝试使用旧技巧并使用globalCompositeOperation='xor'在画布中绘制光标，然后在同一位置再次绘制它以将其删除。之后，您需要将globalCompositeOperation恢复为source-over。

Answer 3

这种方法在Firefox 3.6.8中对我来说足够快，可以在mousemove事件中完成。在绘制十字准线之前保存图像，然后将其恢复为擦除：

保存：

savedImage = new Image()
savedImage.src = canvas.toDataURL("image/png")

要恢复：

ctx = canvas.getContext('2d')
ctx.drawImage(savedImage,0,0)

Answer 4

如果您不想持久存储它，您还可以查看SVG。

Answer 5

试试

ctx.clearRect(0,0,YourCanvasHeight,YourCanvasWidth);

在我的例子中，我实现了一个圆，每次用户点击它时，这条指令都会返回并删除之前的点。

这是完整的代码：

function getMousePosition(canvas, event) {
        let rect = canvas.getBoundingClientRect();
        let x = event.offsetX; //event.clientX - rect.left;
        let y = event.offsetY; //event.clientY - rect.top;
        drawPoint(canvas,x,y);

    };
        
function drawPoint(canvas,x,y) {
        if (canvas.getContext){
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0,0,200,200);
            ctx.beginPath();
            ctx.arc(x, y, 5, 0, 2 * Math.PI);
            ctx.fillStyle = "white";
            ctx.fill();
        }
    };
                        
$(document).ready(function(){
        let canvasElem = document.getElementById("circle");          
        canvasElem.addEventListener("click", function(e)
            {               
                getMousePosition(canvasElem, e);                
            });
            
    });

在画布上的鼠标位置画一个十字架，非持续

5 个答案: