如何停止HTML5画布重影? [英] How can I stop HTML5 Canvas Ghosting?

问题描述

我编写了一个小程序:

1. 将画布内的鼠标光标更改为黑色正方形
2. 为黑色方块提供一条不错的轨迹，该轨迹随着时间(程序点)逐渐消失

代码如下:

  var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");canvas.style.cursor ='none';//删除画布中的常规光标函数getMousePos(canvas，e){var rect = canvas.getBoundingClientRect();返回 {x:e.clientX-rect.left，y:e.clientY-rect.top};}函数fadeCanvas(){ctx.save();ctx.globalAlpha = 0.1;//重新运行每个功能时将不透明度(即淡入淡出)应用于画布ctx.fillStyle ="#FFF";ctx.fillRect(0，0，canvas.width，canvas.height);//褪色的区域(整个画布)ctx.restore();requestAnimationFrame(fadeCanvas);//以60 fps的速度进行动画处理}fadeCanvas();函数draw(e){var pos = getMousePos(canvas，e);ctx.fillStyle =黑色";ctx.fillRect(pos.x，pos.y，8，8);//新游标}addEventListener('mousemove'，draw，false); 

这是一个实时示例: https://jsfiddle.net/L6j71crw/2/

问题

但是，足迹并没有完全消失，而是留下了重影足迹.

问:如何删除重影轨迹?

我尝试以不同的方式使用clearRect()，但它只是清除了整个动画，没有任何显示.充其量，它只是删除了轨迹，仅使方形光标变淡，但是在淡入淡出过程完成后，它仍然不能使光标完全透明.我曾尝试查找有关此内容的帖子，但没有发现任何可以给出明确答案的帖子，而且最重要的是，没有找到带有有效示例的帖子.

有什么想法吗?

解决方案

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

我的代码:

  var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var Positions = [];var maxlength = 20;canvas.style.cursor ='none';//删除画布中的常规光标var V2 = function(x，y){this.x = x;this.y = y;};函数getMousePos(canvas，e){//ctx.clearRect(0，0，canvas.width，canvas.height);var rect = canvas.getBoundingClientRect();返回 {x:e.clientX-rect.left，y:e.clientY-rect.top};}函数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;//重新运行每个功能时将不透明度(即淡入淡出)应用于画布//ctx.fillStyle ="#fff";//ctx.fillRect(0，0，canvas.width，canvas.height);//褪色的区域(整个画布)//ctx.restore();requestAnimationFrame(fadeCanvas);//以60 fps的速度进行动画处理}fadeCanvas();函数draw(e){var pos = getMousePos(canvas，e);Positions.unshift(new V2(pos.x，pos.y));if(Positions.length> maxlength)Positions.pop()//ctx.fillStyle =黑色";//ctx.fillRect(pos.x，pos.y，8，8);//新游标}addEventListener('mousemove'，draw，false); 

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

使光标恒定.

I made a small program that:

1. changes the mouse cursor inside the canvas to a black square
2. gives the black square a nice trail that fades away over time (the point of the program)

Here's the code:

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); 

Here's a live example: https://jsfiddle.net/L6j71crw/2/

Problem

However the trail does not fade away completely, and leaves a ghosting trail.

Q: How can I remove the ghosting trail?

I have tried using clearRect() in different ways, but it just clears the entire animation leaving nothing to display. At best it just removes the trail and only fades the square cursor alone, but it still doesn't make the cursor completely transparent when the fading process is completed. I have tried finding posts about it, but I found nothing that gave a definitive answer and—most importantly—no posts with a working example.

Any ideas?

解决方案

Try having a list of positions, this won't leave a ghost trail!

my code:

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/

Edit: made the cursor constant.

这篇关于如何停止HTML5画布重影?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！