Question

我尝试创建一个动画，其中圆圈由touchevent移动：

function initi() {
    console.log('init');
    // Get a reference to our touch-sensitive element
    var touchzone = document.getElementById("myCanvas");
    // Add an event handler for the touchstart event
    touchzone.addEventListener("mousedown", startTouch, false);
    // You need mouseup to capture the stop event                           
    touchzone.addEventListener("mouseup", stopTouch, false);
}

function startTouch(event) {
    // You can access the event here too..
    // But for demo I will only get the current Time

    startTime = new Date().getTime();
}

function stopTouch(event) {
    // Get a reference to our coordinates div
    var can = document.getElementById("myCanvas");
    // Write the coordinates of the touch to the div



    if (event.pageX < x * 100 && event.pageY > y * 10) {
        // Calculate the duration, only if needed
        var duration = new Date().getTime() - startTime;

        bally -= 0.005 * duration; // use duration

        }
    else if ( event.pageX > x * 100)    {

    }


    // I hope bally if defined in the outer scope somewhere ;)                     
    console.log(event, x, bally);
    draw();
}

所以我的问题是，在event.pageX < x * 100 && event.pageY > y * 10被执行后，当bally -= 0.005 * duration;被触及时，我怎样才能使小号变小？我尝试使用数组保存，如果它被触摸，然后给它更新功能，并知道本地存储和cookie也可以工作，但我认为这不是最好的解决方案。有任何暗示要实现吗？

请参阅fiddle

区域被触摸时的圆形动画

0 个答案: