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 に答える