JavaScript EventListener“pointerMove”：每秒点数

var pointerid = undefined;
var start, count;
var canvas;

function startup() {
  canvas = document.getElementById("canvas");
  canvas.addEventListener("pointerdown", pointerdown, false);
  canvas.addEventListener("pointermove", pointermove, false);
  canvas.addEventListener("pointerup", pointerup, false);
  canvas.addEventListener("pointercancel", pointerup, false);
  canvas.addEventListener("touchstart", touch, false);
  canvas.addEventListener("touchmove", touch, false);
  canvas.addEventListener("touchend", touch, false);
  canvas.addEventListener("touchcancel", touch, false);
}

function pointerdown(event) {
  event.preventDefault();
  rect = canvas.getBoundingClientRect();
  if ((event.pointerType == "pen" || event.pointerType == "mouse") && pointerid == undefined) {
    pointerid = event.pointerId;
    var x = event.clientX - rect.left,
      y = event.clientY - rect.top;
    start = new Date().getTime();
    count = 1;
  }
}

function pointermove(event) {
  event.preventDefault();
  if (pointerid == event.pointerId) {
    var x = event.clientX - rect.left,
      y = event.clientY - rect.top;
    count++;
  }
}

function pointerup(event) {
  event.preventDefault();
  if (pointerid == event.pointerId) {
    var x = event.clientX - rect.left,
      y = event.clientY - rect.top;
    pointerid = undefined;
    count++;
    console.log((count / (new Date().getTime() - start) * 1000) + "pps");
  }
}

function touch(event) {
  if (pointerid != undefined) {
    event.preventDefault();
  }
}
startup();

<div id="canvas" style="width:2000px; height:2000px; ">
</div>

const canvas = document.getElementById("canvas");
let
  count = 0,
  start = 0;
const opts = {passive: true};
canvas.addEventListener("pointerdown", pointerdown, opts);
canvas.addEventListener("pointermove", pointermove, opts);
canvas.addEventListener("pointerup", pointerup, opts);
canvas.addEventListener("touchstart", prevent);
canvas.addEventListener("touchmove", prevent);


function pointermove(event) {
  if(canvas.hasPointerCapture(event.pointerId)) {
    const coalesced = event.getCoalescedEvents();
    count += coalesced.length;
    points.push(...coalesced);
    draw();
  }
}
function pointerdown(event) {
  canvas.setPointerCapture(event.pointerId);
  count = 1;
  start = new Date().getTime();
  points.length = 0;
}
function pointerup(event) {
  if(canvas.hasPointerCapture(event.pointerId)) {
    canvas.releasePointerCapture(event.pointerId);
    count++;
    const PPS = (count / (new Date().getTime() - start) * 1000);
    log.textContent = PPS + "pps";
  }
}

// just to show we have real Events
const ctx = canvas.getContext('2d');
const points = [];
function draw() {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.beginPath();
  points.forEach(evt => {
    ctx.lineTo(evt.offsetX, evt.offsetY);
  });
  ctx.stroke();
}
// prevent default touch events or pointer ones are discarded
function prevent(evt) {
  evt.preventDefault();
}

#canvas {
  border: 1px solid;
}

<pre id="log"></pre>
<canvas id="canvas" width="2000" heigth="2000"></canvas>

if(!('onpointerrawupdate' in window)) {
  console.error("Your browser doesn't support 'pointerrawupdate' event. You may need to toggle some config flags");
}
else {
const canvas = document.getElementById("canvas");
let
  count = 0,
  start = 0;
const opts = {passive: true};
canvas.addEventListener("pointerdown", pointerdown, opts);
canvas.addEventListener("pointerrawupdate", pointermove, opts);
canvas.addEventListener("pointerup", pointerup, opts);


function pointermove(event) {
  if(canvas.hasPointerCapture(event.pointerId)) {
    const coalesced = event.getCoalescedEvents();
    count += coalesced.length;
  }
}
function pointerdown(event) {
  canvas.setPointerCapture(event.pointerId);
  count = 1;
  start = new Date().getTime();
}
function pointerup(event) {
  if(canvas.hasPointerCapture(event.pointerId)) {
    canvas.releasePointerCapture(event.pointerId);
    count++;
    const PPS = (count / (new Date().getTime() - start) * 1000);
    log.textContent = PPS + "pps";
  }
}

// Removed the drawing part because drawing should be made in animation frames
}

#canvas {
  border: 1px solid;
}

<pre id="log"></pre>
<canvas id="canvas" width="2000" heigth="2000"></canvas>