如何停止 HTML5 画布重影？

Question

我做了一个小程序：

1. 将画布内的鼠标光标更改为黑色方块
2. 给黑色方块一个很好的轨迹，随着时间的推移逐渐消失（程序的重点）

代码如下：

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

canvas.style.cursor = 'none'; // remove regular cursor inside canvas

function getMousePos(canvas, e) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: e.clientX - rect.left,
    y: e.clientY - rect.top
  };
}

function fadeCanvas() {
  ctx.save();
  ctx.globalAlpha = 0.1; // the opacity (i.e. fade) being applied to the canvas on each function re-run
  ctx.fillStyle = "#FFF";
  ctx.fillRect(0, 0, canvas.width, canvas.height); // area being faded (whole canvas)
  ctx.restore();
  requestAnimationFrame(fadeCanvas); // animate at 60 fps
}
fadeCanvas();

function draw(e) {
  var pos = getMousePos(canvas, e);
  ctx.fillStyle = "black";
  ctx.fillRect(pos.x, pos.y, 8, 8); // the new cursor
}
addEventListener('mousemove', draw, false); 

这是一个活生生的例子：https://jsfiddle.net/L6j71crw/2/

问题

但是，踪迹并没有完全消失，而是留下了鬼影踪迹。

问：如何去除重影痕迹？

我尝试过以不同的方式使用 clearRect()，但它只是清除了整个动画，什么都没有显示。充其量它只是删除轨迹并且仅单独淡化方形光标，但是当淡化过程完成时它仍然不会使光标完全透明。我曾尝试查找有关它的帖子，但我没有找到任何给出明确答案的帖子，而且最重要的是，没有找到带有工作示例的帖子。

有什么想法吗？

Answer 1

尝试列出职位列表，这不会留下鬼迹！

我的代码：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var Positions = [];
var maxlength = 20;

canvas.style.cursor = 'none'; // remove regular cursor inside canvas

var V2 = function(x, y){this.x = x; this.y = y;};

function getMousePos(canvas, e) {
    // ctx.clearRect(0, 0, canvas.width, canvas.height);
    var rect = canvas.getBoundingClientRect();
    return {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
    };
}

function fadeCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for(var e = 0; e != Positions.length; e++)
    {
        ctx.fillStyle = ctx.fillStyle = "rgba(0, 0, 0, " + 1 / e + ")";
        ctx.fillRect(Positions[e].x, Positions[e].y, 8, 8);

    }
    if(Positions.length > 1)
        Positions.pop()

    //ctx.save();
    //ctx.globalAlpha = 0.5; // the opacity (i.e. fade) being applied to the canvas on each function re-run
    //ctx.fillStyle = "#fff";
    //ctx.fillRect(0, 0, canvas.width, canvas.height); // area being faded (whole canvas)
    //ctx.restore();
    requestAnimationFrame(fadeCanvas); // animate at 60 fps
}
fadeCanvas();

function draw(e) {
    var pos = getMousePos(canvas, e);
    Positions.unshift(new V2(pos.x, pos.y));
    if(Positions.length > maxlength)
        Positions.pop()
    //ctx.fillStyle = "black";
    //ctx.fillRect(pos.x, pos.y, 8, 8); // the new cursor
}
addEventListener('mousemove', draw, false); 

JSFiddle：https://jsfiddle.net/L6j71crw/9/

编辑：使光标保持不变。