Question

尝试在javascript画布上制作点（imageData 1x1）动画以制作星空。

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

这是一个表达陌生感的小提琴：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

我也看到了。这些点在移动时似乎会被拉伸。我以几种速度截取了画布。这些点实际上只有1x1像素。

我相信您可能会遇到Display Motion Blur。这是显示器如何工作的结果，也是因为当光线发生变化时，眼睛中的视觉细胞需要花费一些时间来重新调整。

除了试图隐藏它之外，没有什么可以做的。移动物体越大，移动速度越慢，越来越不明显。

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

画布中的动画点，点的速度奇怪的线条行为＆gt; 1个框架

1 个答案: