javascript - Canvas 中的动画点，奇怪的线条行为，点的速度 > 1 按帧

Question

尝试在 javascript Canvas 上为点(图像数据 1x1)设置动画以制作星空。

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

这里有一个 fiddle 来展示奇怪的地方:http://jsfiddle.net/xp6xd8q1/1/

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

欢迎提出任何想法!

Answer 1

我也看到了。这些点在移动时似乎被拉伸(stretch)了。我以多种速度截取了 Canvas 。这些点实际上只有 1x1 像素。

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

除了尝试隐藏它之外，您实际上无能为力。移动的物体越大，移动速度越慢，这种情况就会变得越来越不明显。

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