2012-12-06 3 views
0

마우스로 그릴 수있는 HTML5 Canvas가 있습니다. 사용자가 새로운 그림을 만들 수 있도록 캔버스를 지울 수 있기를 원합니다. 나는 이것을 다음과 같이한다 :myContext.clearRect (0, 0, 500, 700); Canvas를 올바르게 지우지 못함

캔버스는 분명해 보이지만 사용자가 새로운 그림을 시작하자마자 오래된 그림이 다시 나타난다. 마우스 드로잉 부분에 대한 내 자바 스크립트는 다음과 같습니다

// Variables 
var x1; 
var y1; 
var isPressed = false; 
var myCanvas; 
var myContext; 

function startCanvas() { 

    // Canvas stuff 
    myCanvas = document.getElementById("can1"); 
    myContext = myCanvas.getContext("2d"); 

    // Specify a black background, and white lines that are 3 pixels thick. 
    myContext.fillStyle = '#000000'; 
    myContext.strokeStyle = '#000000'; 
    myContext.fillRect(0, 0, 500, 700); 
    myContext.lineWidth = 3; 
    myContext.fill(); 
} 

function functionMouseDown(e) { 
    // Get coordinates 
    x1 = e.clientX - myCanvas.offsetLeft; 
    y1 = e.clientY - myCanvas.offsetTop; 

    isPressed = true; 
} 

function functionMouseMove(e) { 
    // If mouse is down and moved start drawing line 
    if (isPressed == true) { 
     drawLine(e); 
    } 
} 

function functionMouseUp() { 
    // Stop drawing line 
    isPressed = false; 
} 

function drawLine(e) { 
    // Draw line 
    var x = e.clientX - myCanvas.offsetLeft; 
    var y = e.clientY - myCanvas.offsetTop; 

    myContext.strokeStyle = '#ffffff'; 
    myContext.lineWidth = 1; 
    myContext.moveTo(x1, y1); 
    myContext.lineTo(x, y); 
    myContext.stroke(); 

    // Set start coordinates to current coordinates 
    x1 = x; 
    y1 = y; 
} 

startCanvas(); 

HTML은 다음과 같습니다

<canvas id="can1" width="500" height="700"></canvas> 
+0

당신이 [바이올린]를 제공 할 수 있습니다 (http://jsfiddle.net)? –

답변

2
myContext.strokeStyle = '#000000'; 
myContext.beginPath();//<---- add this and read about this. 
myContext.fillRect(0, 0, 500, 700); 
myContext.lineWidth = 3; //why? 
myContext.fill(); 
+0

아무런 차이가 없습니다. – user1822824

+0

신경 쓰지 마세요, myContext.beginPath()를 추가했을 때; 캔버스 지우기 문제를 해결 한 drawLine 함수 감사! – user1822824

관련 문제