如何在HTML5 Canvas上触摸绘制形状

Question

我有一个问题......

我正在尝试弄清楚如何在HTML5画布上触摸绘制形状。我一直在各地搜索，到目前为止，在物质上找不到任何血统教程是不可能的。有人可以帮帮我吗？我知道如何在画布上“绘制”形状（带代码），但是如何绘制/绘制（触摸）你的手指移动应用< / STRONG>？

到目前为止，这是我的代码......

使用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

另外，您可能希望查看触摸事件（也可在上面的同一链接上找到）

这是我提供的链接的摘录

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);
}