Javascript 在画布上的鼠标位置画一个十字，不持久

我已将此绑定到画布的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();   
}

在某种程度上，它工作得很好。绘制的十字架是持久的，因此当鼠标移动时，会绘制一个新的十字架，但旧的十字架会保留。我尝试过重新绘制画布，但这会导致十字架变得滞后，并在鼠标后面保持相当远的距离

---

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

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

---

或者您可以尝试旧的技巧，使用

globalCompositeOperation='xor'

在画布中绘制光标，然后在同一位置再次绘制光标以将其删除。之后，您需要将

globalCompositeOperation

恢复到

sourceover

此方法运行速度足够快，我在Firefox 3.6.8中可以在鼠标移动事件中执行此操作。在绘制十字线之前保存图像，然后将其恢复为擦除：

要保存：

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

要恢复的文件：

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

---

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

这是我能做的最好的了。 如果您尝试使用setInterval等来设置动画，即使不需要，它也会继续重画。因此，通过这样做，你基本上只需要在鼠标移动时重新绘制，并且只绘制2条线，而不是你想要它在上面的任何内容

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

试试看

ctx.clearRect（0,0，画布高度，画布宽度）

在我的例子中，我实现了一个圆圈，每当用户在圆圈内单击时，该指令返回并删除前面的点

这是完整的代码：

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

---

你是如何重新绘制画布的？如果您使用的是setInterval，则延迟可能太大。我刚刚将所有绘制代码转储到一个函数中，然后在绘制交叉点之前调用它。您考虑过使用CSS游标（）吗？如果默认十字线没有剪切它，可以使用自定义的.cur文件。