El color del trazo de Canvas no cambia en Internet Explorer
Estoy tratando de hacer funcionar una pantalla de protector de pantalla para página web en Windows 10, pero está utilizando Internet Explorer 🙁
Quiero que el color de una línea se desvanezca en el siguiente color mientras se dibuja. Esto funciona bien en Chrome, pero en Internet Explorer, el strokeStyle 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>
davy.ai
Desafortunadamente, el problema con strokeStyle que no se actualiza en cada paso al usar Internet Explorer es un problema conocido con ese navegador. Hay algunas posibles soluciones alternativas, como usar requestAnimationFrame en lugar de setInterval, o volver a dibujar todo el lienzo en cada paso en lugar de solo el segmento de línea. Sin embargo, puede ser difícil lograr la misma transición de color suave que en Chrome. También vale la pena señalar que Internet Explorer es un navegador desactualizado y es posible que no sea completamente compatible con tecnologías web modernas como el lienzo de HTML5. Puede ser conveniente considerar el uso de un navegador más moderno para la pantalla de protector de pantalla de su página web.