zoukankan      html  css  js  c++  java
  • html5 触摸控制

    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 + "
    " + p.innerHTML;
                }
            </script>
        </body>
    </html>

    https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

  • 相关阅读:
    LVS+keepalived DR模式配置 实现高可用集群
    lamp+redis集群配置详解
    Centos7.4+Mariadb集群-主从配置介绍
    centos6.5 LVS-DR模式---全内网环境
    Cacti安装使用&流量监控详解
    纯CSS模拟安卓滑动开关
    Java静态泛型方法使用例子-工具类
    基于KaliLinux的GNOME美化
    ArchLinux安装笔记
    [笔记] SpringMVC+Mybatis搭建Web开发环境
  • 原文地址:https://www.cnblogs.com/xiaopihai988/p/4596820.html
Copyright © 2011-2022 走看看