如何触及HTML5的Canvas

我试图找出如何触摸绘制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>

非常感谢， Wardenclyffe

来源

2012-05-28 Wardenclyffe

不是一个真正的教程，但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-28 20:14:30 rroche

好像我的html5按钮对JS代码有影响。每当我点击画布时，一个正方形会自动弹出，而不是首先让我选择点击我的“方形”按钮，然后绘制它。 – Wardenclyffe

我认为你需要重新思考你想要完成的事情，你需要摆脱点击事件，并添加新的触摸事件，如果你想要做的是能够用你的触摸事件来绘制而不是点击绘制一个盒子 – rroche

如何触及HTML5的Canvas

回答

相关问题