F: Fix verschwommene animierte Linie zu Pfaden auf Leinwand?

Question

Wenn Sie Canvas verwenden, um eine Pfadanimation zu erstellen, ist es verschwommen wenn es sich bewegt, wenn es aufhört, ist es wieder klar. Irgendeine Idee, wie man das repariert?

https://jsfiddle.net/1j1sepa9/3/

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

Vorausgesetzt, dass Sie einen LCD-Monitor verwenden -

Dies ist mehr im Zusammenhang mit dem Monitor und ist schwer aus diesem Grunde zu beheben. Man könnte immer einen hochspezialisierten Monitor mit guter Reaktionszeit kaufen, aber ich bin mir ziemlich sicher, dass es schwierig sein wird, die Benutzer davon zu überzeugen, dasselbe zu tun.

Bei LCD-Monitoren ist dies auf die Zeit zurückzuführen, die zum Ausschalten eines Pixels benötigt wird. Auch bei hellen kontrastreichen Bildern ist die Zeit bis zum Erreichen von 0 (schwarz) etwas besser sichtbar, so dass Sie tatsächlich ein Geisterbild des vorherigen Bildes erhalten - natürlich nicht so bequem, dass es als Bewegungsunschärfe erscheinen kann.

Eine Möglichkeit, um dies teilweise zu umgehen, ist es, die hellste Farbe zu senken und die Grundfarbe etwas zu erhöhen.

Ich habe einen Link zu einer modifizierten Geige im Kommentarbereich unter Verwendung geänderter Werte hinzugefügt. Dies behebt natürlich das Problem nicht vollständig, sondern erhöht die Illusion einer erhöhten Reaktionszeit. Meine 2 Cent.