Функция clearRect не очищает холст

Question

Я использую этот javaScript для функции тела onmousemove:

function lineDraw() {
    //Get the context and the canvas:
    var canvas=document.getElementById("myCanvas");
    var context=canvas.getContext("2d");
    //Clear the last canvas
    context.clearRect(0, 0, canvas.width,canvas.height);
    //Draw the line:
    context.moveTo(0,0);
    context.lineTo(event.clientX,event.clientY);
    context.stroke();

}

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

Вот код:

http://jsfiddle.net/7vx2z/

Answer 1

Вы должны использовать "beginPath ()". Вот и все.

function lineDraw() {   
    var canvas=document.getElementById("myCanvas");
    var context=canvas.getContext("2d");
    context.clearRect(0, 0, context.width,context.height);
    context.beginPath();//ADD THIS LINE!<<<<<<<<<<<<<
    context.moveTo(0,0);
    context.lineTo(event.clientX,event.clientY);
    context.stroke();
}

Answer 2

Имейте в виду, что ctx.clearRect() не работает должным образом в Google Chrome. Я потратил часы, пытаясь решить связанную проблему, но обнаружил, что в Chrome вместо заполнения прямоугольника с помощью rgba(0, 0, 0, 0) он заполняет прямоугольник с помощью rgba(0, 0, 0, 1). вместо!

Следовательно, для правильного заполнения прямоугольника необходимыми прозрачными черными пикселями в Chrome необходимо сделать следующее:

ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.fillRect(left, top, width, height);

Это, конечно, должно работать во всех браузерах, обеспечивая надлежащую поддержку объекта HTML5 Canvas.

Answer 3

И beginPath() и stroke() нам нужно использовать. Этот код работает так же, как clearRect(...)

      ctx.beginPath();
ctx.fillStyle = "rgba(0, 0, 0, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);    
ctx.stroke();

Answer 4

Если вы получаете затемненный экран, используя этот метод

      ctx.beginPath()
ctx.fillStyle = "rgba(0, 0, 0, 255)"
ctx.fillRect(0, 0, canvas.width, canvas.height)    
ctx.stroke();

затем переключите все 0 в rgba на 255

      ctx.beginPath();
ctx.fillStyle = "rgba(255, 255, 255, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);    
ctx.stroke();

Answer 5

Попробуй с context.canvas.width = context.canvas.width:

function lineDraw() {   
    var canvas=document.getElementById("myCanvas");
    var context=canvas.getContext("2d");
    //context.clearRect(0, 0, context.width,context.height);
    context.canvas.width = context.canvas.width;
    context.moveTo(0,0);
    context.lineTo(event.clientX,event.clientY);
    context.stroke();
}

Демо ЗДЕСЬ