clearRect chức năng không rõ ràng vải

Question

Tôi đang sử dụng JavaScript này trên cơ thể onmousemove chức năng:

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

} 

Đó là nghĩa vụ để xóa các vải mỗi khi tôi di chuyển con chuột xung quanh, và vẽ một đường mới, nhưng nó không hoạt động đúng. Tôi đang cố gắng giải quyết nó mà không cần sử dụng jQuery, trình nghe chuột hoặc tương tự.

Đây là mã:

http://jsfiddle.net/7vx2z/

Answer 1

Bạn nên sử dụng "beginPath()". Đó là nó.

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

Hãy thử với 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(); 
} 

Demo HERE