/** * Author: humanhuang * Date: 13-12-12 */var canvas = document.getElementById("canvas"),    stacks = [{        color: "red"    }, {        color: "blue"    }, {        color: "green"    }, {        color: "black"    }, {        color: "yellow"    }, {        color: "orange"    }];function getEmptyStack() {    var i = 0, s, l = stacks.length;    for (; i < l; i++) {        s = stacks[i];        if (!s.touchId)            return s;    }    return null;}function getStackByTouchId(touchId) {    var i = 0, s, l = stacks.length;    for (; i < l; i++) {        s = stacks[i];        if (s.touchId == touchId)            return s;    }    return null;}function touchStart(e) {    e.preventDefault();    var touches = e.changedTouches,        i = 0, l = touches.length, touch, stack;    for (; i < l; i++) {        touch = touches[i];        stack = getStackByTouchId(touch.identifier);        if (stack) return;        stack = getEmptyStack();        if (stack) {            stack.touchId = touch.identifier;            stack.spirit = document.createElement("div");            stack.spirit.className = "spirit";            stack.startX = touch.pageX;            stack.startY = touch.pageY;            stack.spirit.style.left = touch.pageX + "px";            stack.spirit.style.top = touch.pageY + "px";            stack.spirit.style.backgroundColor = stack.color;            canvas.appendChild(stack.spirit);        } else { // stack list is full            return;        }    }}function touchMove(e) {    e.preventDefault();    var touches = e.targetTouches,        i = 0, l = touches.length, touch, stack;    for (; i < l; i++) {        touch = touches[i];        stack = getStackByTouchId(touch.identifier);        if (stack) {            var x = touch.pageX - stack.startX,                y = touch.pageY - stack.startY,                spirit = stack.spirit;            spirit.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';        }    }}function touchEnd(e) {    var touches = e.changedTouches,        i = 0, l = touches.length, touch, stack;//        alert(e.targetTouches.length);    for (;i < l; i++) {        touch = touches[i];        stack = getStackByTouchId(touch.identifier);        if (stack) {            stack.touchId = null;            canvas.removeChild(stack.spirit);            stack.spirit = null;        }    }}function touchCancel(e) {    var touches = e.changedTouches,        i = 0, l = touches.length, touch, stack;    for (;i < l; i++) {        touch = touches[i];        stack = getStackByTouchId(touch.identifier);        if (stack) {            stack.touchId = null;            canvas.removeChild(stack.spirit);            stack.spirit = null;        }    }}canvas.addEventListener("touchstart", touchStart, false);canvas.addEventListener("touchmove", touchMove, false);canvas.addEventListener("touchend", touchEnd, false);canvas.addEventListener("touchCancel", touchCancel, false);