我正在嘗試讓網頁螢屏保護程式在 Windows 10 上運行，但它使用的是 Internet Explorer :(
我希望線條的顏色在繪制時淡入下一種顏色。這在 Chrome 中作業正常，但在 Internet Explorer 中，strokeStyle 不會在每一步都更新。
我已經包含了一個顯示問題的片段的鏈接：
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>uj5u.com熱心網友回復：
Internet Explorer 確實在 RGB CSS 值（strokeStyle被決議為 CSS <color> 值）中阻塞了太多的十進制數。
您的colorTween函式很可能會產生這樣的十進制數，而 IE 將完全忽略該值。
為避免這種情況，請舍入您的 R、G 和 B 值，雖然我不確定是否需要，但您可能還想呼叫.toFixed()Alpha 值（對于 R、G、B，實作無論如何都會丟棄小數，并且對于 alpha，最大粒度為 1/256，即 ~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);
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/404691.html
標籤：
上一篇：Facebook的除錯器顯示預覽影像，但在Facebook上它沒有拉入相同的預覽影像？
下一篇：使用OpenCV使影像線條變暗