Нарисуйте крест на месте мышки на холсте, не постоянно

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

Этот подход работает достаточно быстро для меня в Firefox 3.6.8, чтобы сделать это в случае перемещения мыши.Сохраните изображение, прежде чем нарисовать перекрестие, а затем восстановите его, чтобы стереть:

Для сохранения:

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

Для восстановления:

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

Answer 3

Если вы не хотите хранить его постоянно, вы также можете взглянуть на SVG.

Answer 4

Обычно, если вы рисуете что-то на холсте, вам придется перерисовывать содержимое холста, чтобы стереть его.Я предлагаю вам использовать элемент изображения в качестве курсора и расположить его абсолютно над

. Или вы можете попробовать старый трюк и нарисовать курсор на холсте с помощью globalCompositeOperation='xor', а затем снова нарисовать его в том же месте, чтобыстереть его.После этого вам нужно будет восстановить globalCompositeOperation до source-over.