javascript - 如何在 Canvas 中获得更多光标位置

Question

这是我的代码:

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let cursorPositions = [];

function getCursorPosition(e) {
  let r = canvas.getBoundingClientRect();
  if (cursorPositions.length < 100) {
    cursorPositions.push({
      x: e.clientX - r.left,
      y: e.clientY - r.top
    });
  } else {
    for (let i = 0; i < cursorPositions.length - 1; i++)
      cursorPositions[i] = cursorPositions[i + 1];
    cursorPositions[99] = {
      x: e.clientX - r.left,
      y: e.clientY - r.top
    };
  }
  console.log(cursorPositions.length);
}

function draw() {
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;

  ctx.fillStyle = "#000000";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < cursorPositions.length; i++) {
    ctx.fillStyle = "#ffffff";
    ctx.beginPath();
    ctx.arc(cursorPositions[i].x, cursorPositions[i].y, 1, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
  }
}

function loop() {
  draw();
  requestAnimationFrame(loop);
}

loop();

document.addEventListener("mousemove", function(e) {
  getCursorPosition(e);
});

<canvas id="game"></canvas>

并输出:

在此输出中，我以不同的速度移动光标，并在远处绘制了点。

无论光标速度如何，我都想更频繁地获取光标位置，以便绘制连续曲线。

Answer 1

您可以在两个点之间使用线性插值。假设 dl 是两点之间的最大距离

考虑 A 和 B

A---x---x---B

目标是分割[A; B] 这样 x 以规则的方式间隔但分隔小于 dl

在下面的函数中

function interpolate(a, b, dl) {
  const n = d(a,b)/dl
  const nPoints = Math.ceil(n)-1 //1.5 one point middle, 2, one point middle too
  const dx = (b.x - a.x) / (nPoints + 1)
  const dy = (b.y - a.y) / (nPoints + 1)
  const arr = new Array(nPoints)
  for(let i = 1; i <= nPoints; ++i){
    const x = a.x + i*dx
    const y = a.y + i*dy
    arr[i-1] = { x, y }
  }
  return arr
}

interpolate 这样做。

唯一敏感的部分是

const nPoints = Math.ceil(n)-1
if n == 1+0.x, we must add only one point between A and B
if n == 2, we must add only one point
if n == 2+0.x, we must add two points

dx 和 dy 变量分别为计算的 定义了 x 和 y 的增量>x 点

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let cursorPositions = [];

function getCursorPosition(e){
    let r = canvas.getBoundingClientRect();
    if(cursorPositions.length < 100){
        cursorPositions.push({
            x: e.clientX - r.left,
            y: e.clientY - r.top
        });
    }else{
        for(let i=0; i<cursorPositions.length-1; i++)
            cursorPositions[i] = cursorPositions[i+1];
        cursorPositions[99] = {
            x: e.clientX - r.left,
            y: e.clientY - r.top
        };
    }
}

function d(a, b){
  return Math.sqrt((b.x - a.x)**2 + (b.y - a.y)**2)
}
function interpolate(a, b, dl) {
  const n = d(a,b)/dl
  const nPoints = Math.ceil(n)-1 //1.5 one point middle, 2, one point middle too
  const dx = (b.x - a.x) / (nPoints + 1)
  const dy = (b.y - a.y) / (nPoints + 1)
  const arr = new Array(nPoints)
  for(let i = 1; i <= nPoints; ++i){
    const x = a.x + i*dx
    const y = a.y + i*dy
    arr[i-1] = { x, y }
  }
  return arr
}
function draw(){
    const dl = 10 // 10px max dist between consecutive points
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;

    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    if(cursorPositions.length == 0) return
    cursorPositions.reduce((last, cur) => {
        const n = d(last, cur)/dl
        if(n > 1){
          ctx.fillStyle = "red";
          interpolate(last, cur, dl).forEach(({ x, y }) => {
            ctx.beginPath();
            ctx.arc(x, y, 1, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.fill();   
          })
        }
        ctx.fillStyle = "#ffffff";
        ctx.beginPath();
        ctx.arc(cur.x, cur.y, 1, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fill();
        return cur
    })
}

function loop(){
    draw();
    requestAnimationFrame(loop);
}

loop();

document.addEventListener("mousemove", function(e){
    getCursorPosition(e);
});

<canvas id="game"></canvas>

---

正如 op 在他的帖子的最底部所问的那样，如果想要的行为是获得一条曲线，使得曲线是连续的，平滑曲线的一个更好的方法是采取一些 bezier curve .

下面是立方体的应用。遗憾的是它有点滞后，但希望通过优化一点也许它会更好

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let cursorPositions = [];

function getCursorPosition(e){
    let r = canvas.getBoundingClientRect();
    if(cursorPositions.length < 100){
        cursorPositions.push({
            x: e.clientX - r.left,
            y: e.clientY - r.top
        });
    }else{
      //keep the same points for each bezier curve
      cursorPositions.shift()
      cursorPositions.shift()
      cursorPositions.shift()
      cursorPositions.push({
          x: e.clientX - r.left,
          y: e.clientY - r.top
      })
    }
}

function d(a, b){
  return Math.sqrt((b.x - a.x)**2 + (b.y - a.y)**2)
}
function b3([P0, P1, P2, P3]) {
  if(!P0 || !P1 || !P2 || !P3) return []
  function add(...v){
    return v.reduce((acc, P) => {
      acc.x += P.x
      acc.y += P.y
      return acc
    }, { x: 0, y: 0 })
  }
  function s(scale, P){
    return { x: P.x*scale, y: P.y*scale }
  }
  const B = t => add(s((1-t)**3, P0), s(3*t*(1-t)**2, P1), s(3*(1-t)*t**2, P2), s(t**3, P3))
  const nPoints = Math.ceil(d(P0, P1) + d(P1, P2) + d(P2, P3))
  const arr = new Array(nPoints)
  let t = 0
  for(let i = 0; i < nPoints; ++i){
    t += 1/nPoints
    arr[i] = B(t)
  }
  return arr
}
function draw(){
    const dl = 1 // 20px max dist between consecutive points
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;

    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    if(cursorPositions.length == 0) return
    cursorPositions.reduce((last, cur, i) => {
        const n = d(last, cur)/dl
        if (n > 1 && i % 3 == 0) {
          ctx.fillStyle = "red";
          b3(cursorPositions.slice(i, i+4), dl).forEach(({ x, y }) => {
            ctx.beginPath();
            ctx.arc(x, y, 1, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.fill();   
          })
        }
        ctx.fillStyle = "#ffffff";
        ctx.beginPath();
        ctx.arc(cur.x, cur.y, 1, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fill();
        return cur
    })
}

function loop(){
    draw();
    requestAnimationFrame(loop);
}

loop();

document.addEventListener("mousemove", function(e){
    getCursorPosition(e);
});

<canvas id="game"></canvas>

edit2:最后一个可以使用可用的 api ctx.bezierCurveTo这在我的机器上(不出所料)更快

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let cursorPositions = [];

function getCursorPosition(e){
    let r = canvas.getBoundingClientRect();
    if(cursorPositions.length < 100){
        cursorPositions.push({
            x: e.clientX - r.left,
            y: e.clientY - r.top
        });
    }else{
      //keep the same points for each bezier curve
      cursorPositions.shift()
      cursorPositions.shift()
      cursorPositions.shift()
      cursorPositions.push({
          x: e.clientX - r.left,
          y: e.clientY - r.top
      })
    }
}

function d(a, b){
  return Math.sqrt((b.x - a.x)**2 + (b.y - a.y)**2)
}

function draw(){
    const dl = 1 // 20px max dist between consecutive points
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;

    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.strokeStyle = 'white'
    if(cursorPositions.length == 0) return
    cursorPositions.reduce((last, cur, i) => {
        const n = d(last, cur)/dl
        if (n > 1 && i % 3 == 0) {
          const [P0, P1, P2, P3] = cursorPositions.slice(i, i+4)
          if(!P3) return cur
          ctx.beginPath();
          ctx.moveTo(P0.x, P0.y)
          ctx.bezierCurveTo(P1.x, P1.y, P2.x, P2.y, P3.x, P3.y)
          ctx.stroke();   
          ctx.closePath();
        }
        ctx.fillStyle = "#ffffff";
        ctx.beginPath();
        ctx.arc(cur.x, cur.y, 1, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fill();
        return cur
    })
}
function loop(){
    draw();
    requestAnimationFrame(loop);
}

loop();

document.addEventListener("mousemove", function(e){
    getCursorPosition(e);
});

<canvas id="game"></canvas>