Canvas 将模糊的动画线条固定到画布上的路径？

使用画布制作路径动画时，移动时会模糊，停止时会再次清晰。你知道怎么解决这个问题吗

x=d3.scale.linear（）；
x、 rangeRound（[0，oWidth]）；
x、 域（[0，n_列]）；
//比例尺（2,2）；
ctx.strokeStyle=“白色”；
ctx.lineWidth=2；
ctx.lineCap=“圆形”；
ctx.miterLimit=5；
var iTranslate=（ctx.lineWidth%2）/2；
翻译（iTranslate，iTranslate）；
ctx.font=“10px无衬线”；
ctx.fillStyle=“白色”；
函数render（）{
推（Math.abs（90*Math.random（））；
cData.shift（）；
var numberOfItemsToRender=n_列；
var起始点=0；
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
ctx.beginPath（）；
ctx.moveTo（x（起始点），y（cData[起始点]）；
对于（变量i=startingPoint+1，len=n_列；i

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

这与监视器有关，因此很难修复。人们总是可以买一个高规格的显示器，它有很好的响应时间，但我很确定很难说服用户也这么做

对于LCD监视器，这是由“关闭”像素所需的时间造成的。此外，对于明亮的高对比度图像，到达0（黑色）的时间稍微更为明显，因此您实际上得到的是前一帧的重影图像-当然，这并不方便，因此它可以显示为运动模糊

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

---

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

您在使用LCD显示器吗？Macbook pro 2014视网膜

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