HTML5 캔버스에서 터치 직선을 그리는 방법

iPad 용 그리기 도구를 만들려고 노력 중이며 지금까지 사각형을 완성했으나 코딩 방법에 대해 잘 모르겠습니다 직선? 완성 된 사각형의 코드는 다음과 같습니다. 아마도 도움이 될 것입니다. 직선을 어떻게 코딩해야하는지 알고 싶습니다. 그 후에 원을 그려보고 싶다면 어떻게해야할까요? 이 코드에서 변경해야 할 사항은 무엇입니까?HTML5 캔버스에서 터치 직선을 그리는 방법

자바 스크립트 (광장/사각형)

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

function init() { 
    canvas.addEventListener("touchstart", touchHandler, false); 
    canvas.addEventListener("touchmove", touchHandler, false); 
    canvas.addEventListener("touchend", touchHandler, false); 
} 


function touchHandler(event) { 
    if (event.targetTouches.length == 1) { //one finger touche 
    var touch = event.targetTouches[0]; 

    if (event.type == "touchstart") { 
     rect.startX = touch.pageX; 
     rect.startY = touch.pageY; 
     drag = true; 
    } else if (event.type == "touchmove") { 
     if (drag) { 
     rect.w = touch.pageX - rect.startX; 
     rect.h = touch.pageY - rect.startY ; 
     draw(); 
     } 
    } else if (event.type == "touchend" || event.type == "touchcancel") { 
     drag = false; 
    } 
    } 
} 

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


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



    ctx.fillStyle = "orange"; 
} 

init(); 
}

출처

2012-06-12 Wardenclyffe

대부분의 코드는 사각형 그리기를 결정하는 것입니다. 실제로 그것을 그린 단 하나의 라인이 있습니다. 그 라인을 찾아 다른 클래스와 같은 메소드로 바꿉니다. – DGH

그냥이 대체 :

ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h); 

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

를 뭔가 같이 :

ctx.fillLine(rect.startX, rect.startY, rect.w, rect.h); 

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

이가 여기

코드입니다 물론 100이 아니야. 유효 코드는 유효하지만 개념은 작동해야하고 포인트를 얻을 수 있습니다

출처

2012-06-12 17:40:48 jakee

잠깐, rect.startX 등을 line.startX 등으로 변경합니까? – Wardenclyffe

더 읽기 쉬운 코드를 만들 수 있습니다. – jakee

HTML5 캔버스에서 터치 직선을 그리는 방법

답변

관련 문제