JS 캔버스 : lineTo()

Question

자바 스크립트를 처음 사용했습니다!

변수를 현재 xy 좌표에 지정하면 상대 위치를 사용하여 선을 그릴 수 있습니까? 키보드로 에치 - 스케치를하려고합니다. 위, 아래, 왼쪽, 오른쪽 화살표 키 ... JS, CSS 및 HTML.

감사합니다.

window.addEventListener("keydown", keyd); 
function keyd(event) { 
    var etchMain = document.getElementById('etchMain'); 
    var etchContext = etchMain.getContext('2d'); 
    var key = event.keyCode; 
    **var etchContextPositionX; 
    var etchContextPositionY;** 
    if (key == 37) { 
    // left arrow 
    if (etchMain.toDataURL() == document.getElementById('blank').toDataURL()) { 
     etchContext.beginPath(); 
     etchContext.moveTo(etchMain.width/2, etchMain.height/2); 
     // arrow specific drawing goes here 
    } 
    else { 

    } 
    } 
    if (key == 38) { 
    // up arrow 
    if (etchMain.toDataURL() == document.getElementById('blank').toDataURL()) { 
     etchContext.beginPath(); 
     etchContext.moveTo(etchMain.width/2, etchMain.height/2); 
     // arrow specific drawing goes here 
    } 
    else { 

    } 
    } 
    if (key == 39) { 
    // right arrow 
    if (etchMain.toDataURL() == document.getElementById('blank').toDataURL()) { 
     etchContext.beginPath(); 
     etchContext.moveTo(etchMain.width/2, etchMain.height/2); 
     // arrow specific drawing goes here 
    } 
    else { 

    } 
    } 
    if (key == 39) { 
    // down arrow 
    if (etchMain.toDataURL() == document.getElementById('blank').toDataURL()) { 
     etchContext.beginPath(); 
     etchContext.moveTo(etchMain.width/2, etchMain.height/2); 
     // arrow specific drawing goes here 

    } 
    else { 

    } 
    } 
} 
function clearCanvas() { 
    var etchMain = document.getElementById('etchMain'); 
    var etchContext = etchMain.getContext('2d'); 
    etchContext.clearRect(0, 0, etchMain.width, etchMain.height); 
} 

Answer 1

저는 재미있는 것처럼 들렸던 이유에 대해 정말 기본적인 생각을 구현했습니다. 스 니펫을 실행 한 다음 캔버스 상자를 클릭하여 해당 프레임에 포커스를 둡니다. 이벤트 핸들러는 윈도우 스크롤을 방지하고 대신 화살표 입력을 사용하여 x 및 y을 가져 오거나 거기에서 가져 오거나 스페이스 바를 눌러 캔버스를 지울 수 있습니다.

누락 된 디자인의 비트 X 및 를 저장 한 Y 이벤트 핸들러의 외부 캔버스 라인을 그릴 X와 y의 이전 상태의 차이를 이용하여 :

을

var pos = { 
 
    x: 50, 
 
    y: 50, 
 
} 
 

 
var etchMain = document.getElementById('etchMain'); 
 
var etchContext = etchMain.getContext('2d'); 
 

 
window.addEventListener('keydown', function(e) { 
 
    e.preventDefault(); 
 
    
 
    if(e.keyCode === 32) { 
 
    clearCanvas(); 
 
    } else { 
 

 
    etchContext.beginPath(); 
 
    etchContext.moveTo(pos.x, pos.y); 
 

 
    switch (e.keyCode) { 
 
     //left arrow 
 
     case 37: 
 
     pos.x--; 
 
     break; 
 
     //up arrow 
 
     case 38: 
 
     pos.y--; 
 
     break; 
 
     //right arrow 
 
     case 39: 
 
     pos.x++; 
 
     break; 
 
     //down arrow 
 
     case 40: 
 
     pos.y++; 
 
     break; 
 
     default: 
 
     break; 
 
     } 
 

 
     etchContext.lineTo(pos.x, pos.y); 
 
     etchContext.stroke(); 
 
    } 
 
}); 
 

 
function clearCanvas() { 
 
    etchContext.clearRect(0, 0, etchMain.width, etchMain.height); 
 
}

#etchMain { 
 
    border: 1px solid black; 
 
}

<canvas id="etchMain" height="100" width="100" />