Estoy tratando de hacer que un protector de pantalla de página web funcione en Windows 10, pero está usando Internet Explorer :(
Quiero que el color de una línea se desvanezca al siguiente color mientras se dibuja. Esto funciona bien en Chrome, pero en Internet Explorer, el estilo de trazo no se actualiza en cada paso.
He incluido un enlace a un fragmento que muestra el problema:
function colorTween(from, to, step, maxStep) { const newColor = [0,0,0,0]; from.forEach(function (fromVal, i) { const toVal = to[i]; newColor[i] = fromVal + (((toVal - fromVal)/maxStep)*step); }); return newColor; } //init const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx.lineWidth = 50; ctx.lineCap = "round"; const fromColor = [0,0,0,1]; //black const toColor = [255,255,255,1]; //white const y = canvas.height/2; let x = 0; let prevX = 0; //draw loop setInterval(function () { //increase x x++; //get color fading into next color const drawColor = colorTween(fromColor, toColor, x, canvas.width); //draw line segment ctx.strokeStyle = "rgba("+drawColor[0]+","+drawColor[1]+","+drawColor[2]+","+drawColor[3]+")"; ctx.beginPath(); ctx.moveTo(prevX, y); ctx.lineTo(x, y); ctx.stroke(); ctx.closePath(); //setup for next loop prevX = x; }, 1000/60); body, canvas { margin: 0; padding: 0; border: none; overflow: none; } <!DOCTYPE html> <html> <head> </head> <body> <canvas id="canvas"></canvas> </body> </html>Internet Explorer se atragantó con demasiados números decimales en los valores RGB CSS ( strokeStyle se analiza como un valor CSS <color>).
Es muy probable que su función colorTween produzca tales números decimales e IE simplemente ignorará el valor por completo.
Para evitar eso, redondee sus valores R, G y B, y aunque no estoy seguro de que sea necesario, también puede llamar a .toFixed() en el valor alfa (para R, G, B, el decimal se descarta de todos modos por implementaciones, y para alfa la granularidad máxima es 1/256, es decir ~0.004).
from.forEach(function (fromVal, i) { const toVal = to[i]; const newVal = fromVal + (((toVal - fromVal)/maxStep)*step); newColor[i] = i===3 ? newVal.toFixed(3) : Math.round(newVal);