0

我有个问题...

我试图弄清楚如何在 HTML5 画布上触摸绘制形状。我一直在到处寻找，到目前为止，还找不到任何关于物质的下降教程。有人可以帮我吗？我知道如何在画布上“绘制”形状（使用代码），但是您如何使用（触摸）移动应用程序的手指绘制/绘画？

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

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>

非常感谢，沃登克里夫

4

1 回答 1

2

不是真正的教程，但 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);
}
于 2012-05-28T20:14:30.690 回答