Microsoft Edge 中的语法错误 Javascript

Question

我有一个 Javascript 可以为 canvas 元素创建线性渐变并设置一些色标。

该脚本在 Chrome 和 Firefox 中按预期工作，但在 Edge（以及 IE）中给了我一个 "SyntaxError"。

错误出现在运行时，对我来说，这意味着我的脚本在语法上是正确的，但底层实现中可能存在错误（在这种情况下 gradient 的 setColorStop 函数，但这只是一个猜测）。

这是精简版：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function loader() {
                var ctx = document.getElementById("canvas1").getContext('2d');      
                var left = 0;
                var right = 199;
                var gradient = ctx.createLinearGradient(left, 0, right, 0);
                var a = 20 ;
                var b = 2 ;
                var c = "#17a2b8" ;
                var d = "#80808080" ;
                console.log( a,b,c,d ) ;
                gradient.addColorStop( 0, c ) ;
                console.log( "done 1" ) ;
                gradient.addColorStop( ( a - ( b - 1 ) ) / a, c ) ;
                console.log( "done 2" ) ;
                gradient.addColorStop( ( a - ( b - 1 ) ) / a, d ) ; // <== SyntaxError here!
                console.log( "done 3" ) ;
                gradient.addColorStop( 1, d ); 
                console.log( "done 4" ) ;
            }
        </script>
    </head>
    <body onload="loader()">
        <canvas id="canvas1" sytle="width:200px;height:200px"></canvas>
    </body>
</html>

这是 Edge 的控制台输出：

... 和来自 Chrome（用于比较）：

我的问题：为什么会发生这种情况，我该如何解决这个问题？

Answer 1

这很可能是由于某些版本的 Edge 不支持 #rrggbbaa 十六进制颜色表示法 (var d = "#80808080";)。

更新它或使用 rgba(255, 255, 255, 1) 表示法

Microsoft Edge 中的语法错误 Javascript

SyntaxError in Microsoft Edge Javascript

javascript

hex

microsoft-edge