Как ПРИКАСАТЬСЯ рисовать фигуры на HTML5 Canvas

Question

У меня есть вопрос ...

Я пытаюсь выяснить, как сенсорный рисовать фигуры на холсте HTML5. Я искал везде, и до сих пор было невозможно найти какой-либо спуск учебник по материи. Может кто-нибудь, пожалуйста, помогите мне? Я знаю, как «рисовать» фигуры на холсте (с кодом), но как вы делаете рисовать/рисовать с (touch) ваш палец для мобильных приложений?

Вот мой код до сих пор ...

Javascript:

---

 // draws a Square to the x and y coordinates of the mouse event inside 
    // the specified element using the specified context 
    function drawSquare(mouseEvent, sigCanvas, context) { 

    var position = getPosition(mouseEvent, sigCanvas); 

    context.strokeStyle = "color"; 
    context.strokeRect(x,y,width,height); 
    } 

    // draws a square from the last coordiantes in the path to the finishing 
    // coordinates and unbind any event handlers which need to be preceded 
    // by the mouse down event 
    function finishDrawing(mouseEvent, sigCanvas, context) { 
    // draw the line to the finishing coordinates 
    drawSquare(mouseEvent, sigCanvas, context); 

    context.closePath(); 

    // unbind any events which could draw 
    $(sigCanvas).unbind("mousemove") 
       .unbind("mouseup") 
       .unbind("mouseout"); 
    } 

HTML5:

---

<div id="squareButton"> 
    <p><button onclick="drawSquare();">Square</button></p> 
</div> 

Спасибо большое, Wardenclyffe

Answer 1

Не совсем учебник, но MDN имеет решение здесь https://developer.mozilla.org/en/DOM/Touch_events#Drawing_as_the_touches_move

дополнительно вы можете захотеть взглянуть на сенсорные события (также доступны на той же ссылке выше)

здесь отрывок из ссылки I если

function startup() { 
    var el = document.getElementsByTagName("canvas")[0]; 
    el.addEventListener("touchstart", handleStart, false); 
    el.addEventListener("touchend", handleEnd, false); 
    el.addEventListener("touchcancel", handleCancel, false); 
    el.addEventListener("touchleave", handleEnd, false); 
    el.addEventListener("touchmove", handleMove, false); 
}