HTML5 캔버스 (그리기 (직사각형)이 계속 사라짐)

Question

어때요?

최근에이 사이트에서 제공 한 도움말을 통해 HTML5 캔버스에 버튼을 클릭하여 직사각형을 그리는 방법을 배웠습니다. 문제는 아닙니다 :)이 문제는 ... 불행히도 ... 캔바스를 클릭하여 새 사각형을 만들 때마다 이전 사각형이 사라지거나 즉시 지워집니다. 내 iPod에 그것을 사용하려고 할 때 그것은 또한 ... 전혀 작동하지 않는 이유 :(

---

여기 내 코드입니다 :

---

JAVASCRIPT :

// "Rectangle" Button 
function rect() 
{ 
var canvas = document.getElementById('canvasSignature'), 
    ctx = canvas.getContext('2d'), 
    rect = {}, 
    drag = false; 


    function init() { 
    canvas.addEventListener('mousedown', mouseDown, false); 
    canvas.addEventListener('mouseup', mouseUp, false); 
    canvas.addEventListener('mousemove', mouseMove, false); 
} 


function mouseDown(e) { 
    rect.startX = e.pageX - this.offsetLeft; 
    rect.startY = e.pageY - this.offsetTop; 
    drag = true; 
} 


function mouseUp() { 
    drag = false; 
} 


function mouseMove(e) { 
    if (drag) { 
    rect.w = (e.pageX - this.offsetLeft) - rect.startX; 
    rect.h = (e.pageY - this.offsetTop) - rect.startY ; 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    draw(); 
    } 
} 


function draw() { 
    ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h); 
} 


init(); 
} 

---

HTML5 :

<div id="canvasDiv"> 
    <canvas id="canvasSignature" width="580px" height="788px" style="border:2px solid #000; background: #FFF;"></canvas> 
</div> 

<div id="rect"> 
    <p><button onclick="rect();">Rectangle</button></p> 
</div> 

---

은 어떤 도움이 전혀 주시면 감사하겠습니다 :)

Answer 1

당신은 캔버스를

ctx.clearRect(0, 0, canvas.width, canvas.height);