效果如下



代码如下：

  1. //index.html
  3. <!DOCTYPE html>
  4. <html lang="zh-CN">
  5. <head>
  6.   <meta charset="utf-8">
  7.   <title>触摸事件</title>
  8.   <link href="style.css" rel="stylesheet" type="text/css" />
  9.   <script src="main.js" defer></script>
  10. </head>
  11. <body>
  12.   <canvas id="canvas">
  13.     当前浏览器不支持 canvas 元素
  14.   </canvas>
  15.   <br>记录：
  16.   <pre id="log"></pre>
  17. </body>
  18. </html>
  1. //main.js
  2. const ongoingTouches = [];
  3. const el = document.getElementById("canvas");
  4. const ctx = el.getContext("2d");
  6. window.onload = () => {
  7.   el.width = 600;
  8.   el.height = 600;
  9.   el.addEventListener("touchstart", handleStart, false);
  10.   el.addEventListener("touchend", handleEnd, false);
  11.   el.addEventListener("touchcancel", handleCancel, false);
  12.   el.addEventListener("touchmove", handleMove, false);
  13.   log("初始化成功。");
  14. };
  16. function handleStart(evt) {
  17.   evt.preventDefault();
  18.   log("触摸开始。");
  19.   const touches = evt.changedTouches;
  21.   for (let i = 0; i < touches.length; i++) {
  22.     log("开始第 " + i + " 个触摸 ...");
  23.     ongoingTouches.push(copyTouch(touches[i]));
  24.     ctx.beginPath();
  25.     ctx.fillStyle = colorForTouch(touches[i]);
  26.     ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false);
  27.     // 在起点画一个圆
  28.     ctx.fill();
  29.     log("第 " + i + " 个触摸已开始。");
  30.   }
  31. }
  33. function handleMove(evt) {
  34.   evt.preventDefault();
  35.   const touches = evt.changedTouches;
  36.   for (let i = 0; i < touches.length; i++) {
  37.     const color = colorForTouch(touches[i]);
  38.     const idx = ongoingTouchIndexById(touches[i].identifier);
  39.     if (idx >= 0) {
  40.       log("继续第 " + idx + " 个触摸。");
  41.       ctx.beginPath();
  42.       log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " +
  43.                           ongoingTouches[idx].pageY + ");");
  44.       ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
  45.       ctx.lineWidth = 4;
  46.       ctx.fillStyle = color;
  47.       log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");");
  48.       ctx.lineTo(touches[i].pageX, touches[i].pageY);
  49.       ctx.strokeStyle = color;
  50.       ctx.stroke();
  51.       ongoingTouches.splice(idx, 1, copyTouch(touches[i]));  // 切换到新触摸
  52.       log(".");
  53.     } else {
  54.       log("无法确定下一个触摸点。");
  55.     }
  56.   }
  57. }
  59. function handleEnd(evt) {
  60.   evt.preventDefault();
  61.   log("触摸结束。");
  62.   const touches = evt.changedTouches;
  63.   for (let i = 0; i < touches.length; i++) {
  64.     const color = colorForTouch(touches[i]);
  65.     const idx = ongoingTouchIndexById(touches[i].identifier);
  66.     if (idx >= 0) {
  67.       ctx.lineWidth = 4;
  68.       ctx.fillStyle = color;
  69.       ctx.beginPath();
  70.       ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
  71.       ctx.lineTo(touches[i].pageX, touches[i].pageY);
  72.       ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8);
  73.       // 在终点画一个正方形
  74.       ongoingTouches.splice(idx, 1);  // 用完后移除
  75.     } else {
  76.       log("无法确定下一个触摸点。");
  77.     }
  78.   }
  79. }
  81. function handleCancel(evt) {
  82.   evt.preventDefault();
  83.   log("触摸取消。");
  84.   const touches = evt.changedTouches;
  86.   for (let i = 0; i < touches.length; i++) {
  87.     const idx = ongoingTouchIndexById(touches[i].identifier);
  88.     ongoingTouches.splice(idx, 1);  // 用完后删除
  89.   }
  90. }
  92. // 以下是便捷函数
  94. function colorForTouch(touch) {
  95.   const r = (touch.identifier % 16).toString(16);
  96.   const g = (Math.floor(touch.identifier / 3) % 16).toString(16);
  97.   const b = (Math.floor(touch.identifier / 7) % 16).toString(16);
  98.   const color = "#" + r + g + b;
  99.   log("identifier " + touch.identifier + " 的颜色为：" + color);
  100.   return color;
  101. }
  103. function copyTouch(touch) {
  104.   return {
  105.      identifier: touch.identifier,
  106.      pageX: touch.pageX,
  107.      pageY: touch.pageY
  108.   };
  109. }
  111. function ongoingTouchIndexById(idToFind) {
  112.   for (let i = 0; i < ongoingTouches.length; i++) {
  113.     const id = ongoingTouches[i].identifier;
  115.     if (id == idToFind) {
  116.       return i;
  117.     }
  118.   }
  119.   return -1;    // 未找到
  120. }
  122. function log(msg) {
  123.   const p = document.getElementById('log');
  124.   p.innerHTML =
  125.     new Date().toString().substring(16, 24) + ' ' + msg + "\n" + p.innerHTML;
  126. }
  1. //style.css
  2. body {
  3.     padding: 0;
  4.     margin: 10px
  5. }
  7. svg:not(:root) {
  8.     display: block
  9. }
  11. .playable-code {
  12.     background-color: #f4f7f8;
  13.     border: none;
  14.     border-left: 6px solid #558abb;
  15.     border-width: medium medium medium 6px;
  16.     color: #4d4e53;
  17.     height: 100px;
  18.     width: 90%;
  19.     padding: 10px 10px 0
  20. }
  22. .playable-canvas {
  23.     border: 1px solid #4d4e53;
  24.     border-radius: 2px
  25. }
  27. .playable-buttons {
  28.     text-align: right;
  29.     width: 90%;
  30.     padding: 5px 10px 5px 26px
  31. }
  33. #canvas {
  34.     border: 1px solid #000;
  35. }
  37. #log {
  38.     border: 1px solid #ccc;
  39. }

touch-paint的更多相关文章

  1. 【appium】根据accessibility_id定位元素

    如何获得AccessibilityId 可以通过UIAutomatorViewer或者Appium Inspector获得.Accessibility ID在Android上面就等同于contentD ...

  2. android中自定义view---实现竖直方向的文字功能，文字方向朝上，同时提供接口，判断当前touch的是哪个字符，并改变颜色

    android自定义view,实现竖直方向的文字功能,文字方向朝上,同时提供接口,判断当前touch的是哪个字符,并改变颜色. 由于时间比较仓促,因此没有对代码进行过多的优化,功能远远不如androi ...

  3. Android事件处理第一节（View对Touch事件的处理）

    http://ipjmc.iteye.com/blog/1694146 在Android里Touch是很常用的事件,尤其实在自定义控件中,要实现一些动态的效果,往往要对Touch进行处理.Androi ...

  4. Android Touch事件之一：Touch事件在父ViewGroup和子View之间的传递篇

    2015-11-26 17:00:22 前言:Android的Touch事件传递和View的实现紧密相连,因此理解Touch事件的传递,有助于我们更好的理解View的工作原理. 1. 几个重要的方法: ...

  5. Xamarin.Forms实现touch事件

    Xamarin.Forms的View没有touch事件,只能自己实现 首先,在共享项目里面,放入这几个类,结构大概是这样的: using System; using Xamarin.Forms; na ...

  6. 详解Paint的setXfermode(Xfermode xfermode)

    一.setXfermode(Xfermode xfermode) Xfermode国外有大神称之为过渡模式,这种翻译比较贴切但恐怕不易理解,大家也可以直接称之为图像混合模式,因为所谓的“过渡”其实就是 ...

  7. android Canvas 和 Paint用法

    自定义view里面的onDraw方法,在这里我们可以绘制各种图形,onDraw里面有两个API我们需要了解清楚他们的用法:Canvas 和 Paint. Canvas翻译成中文就是画布的意思,Canv ...

  8. mkdir,rmdir,cp,rm,mv,cat,touch用法

    一.mkdir新建目录 1.进入tmp目录,查看该目录下面的子目录 [root@localhost ~]# cd /tmp[root@localhost tmp]# lshsperfdata_root ...

  9. UC浏览器中touch事件的异常记录

    以前也在UC上面栽过几个坑,不过都是页面显示方面的.上个周的时候,商品详情页重做,要添加个上拉显示详情的效果. 有两个条件需要判断: 1.是否到达底部: 2.到达底部之后拖动的y轴距离. 效果写完后, ...

  10. 移动端web开发，click touch tap区别

    转自: http://blog.csdn.net/sly94/article/details/51701188 移动端用tap时会有穿透问题 一:click与tap比较 click与tap都会触发点击 ...

随机推荐

  1. hive表链接

    等值连接 不等职链接 外部链接 没有包含在聚合函数(这里是count)中的列,都需要包含在group by函数中: 正确的外链接的写法,用的是右外链接: 自链接表 把同一张表 看成了2张表

  2. HTML5 & tel & make a phone call

    HTML5 & tel & make a phone call 咋呼叫呀,网页怎么打电话? { key: "exploreCorpPhone", title: &q ...

  3. edge

    https://www.cnblogs.com/st-leslie/p/6784990.html

  4. Java多线程之单例模式（线程安全）

    package org.study2.javabase.ThreadsDemo.sync; /** * @Auther:GongXingRui * @Date:2018/9/20 * @Descrip ...

  5. 创建一个UWP 打包签名

    Create a certificate for package signing 2017/2/8 3 min to read [ Updated for UWP apps on Windows 10 ...

  6. mybatis，主键返回指的是返回到传入的对象中

  7. Neutron 网络基本概念

    Neutron 网络基本概念 上次我们讨论了 Neutron 提供的功能,今天我们学习 Neutron 模块几个重要的概念. Neutron 管理的网络资源包括 Network,subnet 和 po ...

  8. linux系统命令大全

    文件管理 cat chattr chgrp chmod chown cksum cmp cp cut diff diffstat file find git gitview in indent les ...

  9. 【XSY1515】【GDKOI2016】小学生数学题 组合数学

    题目描述 给你\(n,k,p\)(\(p\)为质数),求 \[ \sum_{i=1}^n\frac{1}{i}\mod p^k \] 保证有解. \(p\leq {10}^5,np^k\leq {10 ...

  10. IDEA如何查看maven的依赖结构

    打开方式: 方法一:该工具有个Maven Projects窗口,一般在右侧能够找到,如果没有可以从菜单栏打开:View>Tool Windows>Maven Projects:选择要分析的 ...