Javascript 在画布上设置点的动画，使用点的速度设置奇怪的线条行为>；一帧一帧

尝试在javascript画布上设置点（imageData 1x1）的动画，以生成星域

奇怪的是，当这些点以高于1的速度移动时，会出现闪烁或其他任何东西，显示的不是点而是线

这里有一把小提琴来表示这种奇怪：

函数clearCanvas（）{ ctx.fillStyle='#000000'； ctx.fillRect（0,0，w，h）； } 函数星（）{ this.manyStars=[]； this.addStars=函数（nb）{ 变量i，x，y；

---

对于（i=0；i我也看到了。这些点在移动时似乎被拉伸。我以几种速度对画布进行了屏幕截图。这些点实际上只有1x1像素

我相信你可能正在经历。这是显示器工作的结果，也是因为当光线变化时，你眼睛中的视觉细胞需要一点时间来重新调整

对于这一点，你真的无能为力，除了试着隐藏它。你移动的对象越大，移动的越慢，它就变得越来越不明显

---

当显示器刷新率增加时，它也会变得不那么明显。请参阅。由于您无法控制用户显示器的刷新率，这对您没有任何帮助。

回答suppen和marke：首先，感谢您尝试阐明这一点：p我已经尝试了fillrect和其他东西，结果相同。putImageData vs fillrect在stackoverflow上非常流行！需要注意的是，如果“暂停”场景（例如chrome工具），点就是它们应该是的，也就是点！这个奇怪的东西只有在动画中才会出现，而且速度大于1。更奇怪的是，如果我在白点所在的地方画一个黑点，那就更糟了……好吧，我会坚持“运动模糊”的东西，即使我不是100%在里面。在任何游戏中都会有如此多的模糊！尝试了双缓冲，创建了img then移动它、设置div动画、设置线条动画、放置更长的img（点然后黑色）、各种点擦除以及其他一些事情，以获得相同的结果：/感谢您的帮助：pi考虑了运动模糊的问题，但是如果使用10的速度（例如），线条也更长了…@sliss。原因如下：当你向左拉imageData时，画布的正确大小不再被imageData覆盖。因此，你以前画的星星不会被擦除，你会看到一颗星星的多个副本水平地出现在画布上。正如回答中所述，这是正确的，“视错觉”以显示模糊的形式。这里有另一种绘制星星的方法，保证它们是1x1：。当增加点的大小时（由于对比度增加），模糊变得更可见（作为模糊）：

function clearCanvas() {
    ctx.fillStyle = '#000000';
    ctx.fillRect(0,0,w,h);
}
function stars() {
    this.manyStars = [];

    this.addStars = function(nb) {
        var i,x,y;
        for(i=0;i<nb;i++) {
            x = Math.floor(Math.random() * w);
            y = Math.floor(Math.random() * h);
            this.manyStars.push({x: x,y: y,s: 5});    // dot speed is s
        }
    }
    this.move = function() {
        var i,l;
        for(i=0,l = this.manyStars.length;i<l;i++) {
            this.manyStars[i].x = this.manyStars[i].x - this.manyStars[i].s;
            if(this.manyStars[i].x < 0) {
                this.manyStars[i].x = w + this.manyStars[i].x;
            }
        }
    }
    this.drawStars = function() {
        var i,l;
        for(i=0,l = this.manyStars.length;i<l;i++) {
            ctx.putImageData(dot,this.manyStars[i].x,this.manyStars[i].y);
        }
    }
}
function run() {
    clearCanvas();
    s.move();
    s.drawStars();
    window.requestAnimationFrame(run);
}
//
window.requestAnimationFrame = window.requestAnimationFrame||window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;
var cv = document.createElement('canvas');
var w =  window.innerWidth, h = window.innerHeight;
cv.width = w;
cv.height = h;
var ctx = cv.getContext('2d');
document.body.appendChild(cv);
//
var dot = ctx.createImageData(1,1);
dot.data = [255,255,255,255];
s = new stars();
s.addStars(10);
window.requestAnimationFrame(run);