html5 触摸控制

时间：2015-06-24 10:54:02 阅读：232 评论：0 收藏：0 [点我收藏+]
标签：
http://www.360us.net/article/9.html
<!DOCTYPE html>
<html>
    <head><title>Touch Test</title></head>
    <body>
        <canvas id="canvas" width="600" height="600" style="border:solid black 1px;">
          Your browser does not support canvas element.
        </canvas>
        <br>
        <br>
        Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
        <script type="text/javascript">
            document.body.onload = startup; //文档加载完毕触发
 
            var ongoingTouches = new Array(); //用来保存跟踪正在发送的触摸事件
 
            //设置事件处理程序
            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);
              log("initialized.");
            }
 
            //处理触摸开始事件
            function handleStart(evt) {
              evt.preventDefault(); //阻止事件的默认行为
              log("touchstart.");
              var el = document.getElementsByTagName("canvas")[0];
              var ctx = el.getContext("2d");
              var touches = evt.changedTouches;
                     
              for (var i=0; i < touches.length; i++) {
                log("touchstart:"+i+"...");
                ongoingTouches.push(copyTouch(touches[i]));
                var color = colorForTouch(touches[i]);
                ctx.beginPath();
                ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0,2*Math.PI, false);  // a circle at the start
                ctx.fillStyle = color;
                ctx.fill();
                log("touchstart:"+i+".");
              }
            }
 
            //处理触摸移动事件
            function handleMove(evt) {
              evt.preventDefault();
              var el = document.getElementsByTagName("canvas")[0];
              var ctx = el.getContext("2d");
              var touches = evt.changedTouches;
 
              for (var i=0; i < touches.length; i++) {
                var color = colorForTouch(touches[i]);
                var idx = ongoingTouchIndexById(touches[i].identifier);
 
                if(idx >= 0) {
                  log("continuing touch "+idx);
                  ctx.beginPath();
                  log("ctx.moveTo("+ongoingTouches[idx].pageX+", "+ongoingTouches[idx].pageY+");");
                  ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
                  log("ctx.lineTo("+touches[i].pageX+", "+touches[i].pageY+");");
                  ctx.lineTo(touches[i].pageX, touches[i].pageY);
                  ctx.lineWidth = 4;
                  ctx.strokeStyle = color;
                  ctx.stroke();
 
                  ongoingTouches.splice(idx, 1, copyTouch(touches[i]));  // swap in the new touch record
                  log(".");
                } else {
                  log("can‘t figure out which touch to continue");
                }
              }
            }
 
            //处理触摸结束事件
            function handleEnd(evt) {
              evt.preventDefault();
              log("touchend/touchleave.");
              var el = document.getElementsByTagName("canvas")[0];
              var ctx = el.getContext("2d");
              var touches = evt.changedTouches;
 
              for (var i=0; i < touches.length; i++) {
                var color = colorForTouch(touches[i]);
                var idx = ongoingTouchIndexById(touches[i].identifier);
 
                if(idx >= 0) {
                  ctx.lineWidth = 4;
                  ctx.fillStyle = color;
                  ctx.beginPath();
                  ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
                  ctx.lineTo(touches[i].pageX, touches[i].pageY);
                  ctx.fillRect(touches[i].pageX-4, touches[i].pageY-4, 8, 8);  // and a square at the end
                  ongoingTouches.splice(idx, 1);  // remove it; we‘re done
                } else {
                  log("can‘t figure out which touch to end");
                }
              }
            }
 
            //处理触摸对出事件
            function handleCancel(evt) {
              evt.preventDefault();
              log("touchcancel.");
              var touches = evt.changedTouches;
               
              for (var i=0; i < touches.length; i++) {
                ongoingTouches.splice(i, 1);  // remove it; we‘re done
              }
            }
 
            //选择颜色
            function colorForTouch(touch) {
              var r = touch.identifier % 16;
              var g = Math.floor(touch.identifier / 3) % 16;
              var b = Math.floor(touch.identifier / 7) % 16;
              r = r.toString(16); // make it a hex digit
              g = g.toString(16); // make it a hex digit
              b = b.toString(16); // make it a hex digit
              var color = "#" + r + g + b;
              log("color for touch with identifier " + touch.identifier + " = " + color);
              return color;
            }
 
            //拷贝一个触摸对象
            function copyTouch(touch) {
              return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY };
            }
 
            //找出正在进行的触摸
            function ongoingTouchIndexById(idToFind) {
              for (var i=0; i < ongoingTouches.length; i++) {
                var id = ongoingTouches[i].identifier;
                 
                if (id == idToFind) {
                  return i;
                }
              }
              return -1;    // not found
            }
 
            //记录日志
            function log(msg) {
              var p = document.getElementById(‘log‘);
              p.innerHTML = msg + "\n" + p.innerHTML;
            }
        </script>
    </body>
</html>
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
html5 触摸控制
标签：
原文地址：http://www.cnblogs.com/xiaopihai988/p/4596820.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行