绘制在鼠标位置处的横在画布上，非持续

我有这个绑定到我的画布的鼠标移动事件：绘制在鼠标位置处的横在画布上，非持续

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

，它工作正常，到一个点。绘制的十字是持久的，所以当鼠标移动时，绘制新的十字，但旧的十字仍然存在。我试图重新绘制画布，但导致十字架滞后，并保持相当远离鼠标。

，所以我需要知道如何画十字，使其DIS-出现，而不要是你画在画布上的东西在画布上重新绘制一切

来源

2010-08-03 Arcath

你是如何重画画布的？如果您使用setInterval，则延迟可能太高。 – Castrohenge 2010-08-03 16:56:33

我刚将所有绘制代码转储到函数中，然后在绘制交叉之前将其调用 – Arcath 2010-08-03 19:33:36

您是否考虑过使用CSS游标（http://www.echoecho.com/csscursors.htm）？如果默认十字准线不能削减它，则可以改为使用自定义.cur文件。 – 2011-09-11 18:07:04

通常你将不得不重新绘制在画布内容擦除它。我建议你使用一个图像元素作为光标，并将其定位在绝对高于

或者你可以尝试旧的技巧，并在画布上用globalCompositeOperation='xor'绘制光标，然后在同一个地方再次绘制以擦除它。之后，您需要将globalCompositeOperation恢复为source-over。

来源

2010-08-05 10:14:17 andrewmu

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

为了节省：

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

的恢复：

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

来源

2010-11-26 03:32:16

如果你不想存储它持续，你也可以看看SVG。

来源

2011-09-11 17:43:34

http://jsfiddle.net/PgKEt/2/ 这是我能做的最好的。如果您尝试使用setInterval等来设置动画效果，即使不需要它也会继续进行重绘。因此，通过这样做，基本上只有在鼠标移动时才会重绘，并且只绘制2行，而不是您想要的任何内容。另外，如果你有任何检测，如mousedown等，它必须在任何画布顶部，否则它不会再检测它们。

来源

2012-10-04 16:20:44 Vivix

绘制在鼠标位置处的横在画布上，非持续

回答

相关问题