Question

当使用画布制作路径动画时，移动时会变得模糊，当它停止时它会再次变得清晰。知道如何解决这个问题吗？

x = d3.scale.linear();
    x.rangeRound([0, oWidth]);
    x.domain([0, n_columns]);
    // ctx.scale(2,2);
    ctx.strokeStyle = "white";
    ctx.lineWidth = 2;
    ctx.lineCap = "round";
    ctx.miterLimit = 5;
    var iTranslate = (ctx.lineWidth % 2) / 2;
    ctx.translate(iTranslate, iTranslate);
    ctx.font = "10px sans-serif";
    ctx.fillStyle = "white"; 

function render() {
    cData.push(Math.abs(90 * Math.random()));
    cData.shift();
        var numberOfItemsToRender = n_columns;
        var startingPoint = 0;
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.beginPath();
        ctx.moveTo(x(startingPoint), y(cData[startingPoint]));
        for (var i = startingPoint + 1, len = n_columns; i < len; i++) {
            ctx.lineTo(x(i),y(cData[i]));
        }
        ctx.stroke();
}

Answer 1

假设您使用的是液晶显示器 -

这与显示器更相关，因此难以修复。人们可以随时购买具有良好响应时间的高规格显示器，但我很确定很难说服用户也这样做。

对于LCD显示器，它是由关闭＆＃34;关闭所需的时间引起的。一个像素。此外，对于明亮的高对比度图像，到达0（黑色）的时间稍微更明显，因此您实际上获得了前一帧的重影 - 当然，不方便，因此它可以显示为运动模糊。 / p>

部分解决这个问题的一种方法是降低最亮的颜色，并增加底色。

我使用更改的值在下面的评论部分添加了一个修改过的小提琴的链接。这当然不能完全解决问题，但会增加响应时间增加的错觉。我的2美分。

问：修复模糊的动画线到画布上的路径？

1 个答案: