鍍金池/ 問(wèn)答/HTML5  HTML/ canvas顏色透明漸變?cè)贔irefox和Chrome上顯示不一致？

canvas顏色透明漸變?cè)贔irefox和Chrome上顯示不一致？

做了一個(gè)漸變的背景色（半透明），但是在Firefox和Chrome上顯示不一致，請(qǐng)問(wèn)是我漏了什么么？

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
body{background: #000;}
</style>
</head>
<body>
    <div style="padding: 50px;">
        <canvas id="myCanvas" width="400px" height="200px"></canvas>
    </div>
    <script type="text/javascript">
        drawCnvas(document.getElementById('myCanvas'));
        function drawCnvas(obj){
            var ctx = obj.getContext("2d");
            var ht = obj.height;
            var wt = obj.width;
            var my_gradient = ctx.createLinearGradient(0,0,0,ht);
            my_gradient.addColorStop(0,'rgba(0, 255, 255, 0.5)');
            my_gradient.addColorStop(1,'rgba(0,0,0,0)');
            ctx.fillStyle = my_gradient;
            ctx.fillRect(0,0,wt,ht);
        }
    </script>
</body>
</html>

Firefox版本61.0.1
Chrome版本67.0.3396.99

Firefox

Chrome

回答
編輯回答
任她鬧

經(jīng)實(shí)測(cè)，firefox對(duì)LinearGradient的實(shí)現(xiàn)有區(qū)別
firefox似乎是(以黑色背景配合alpha透明度通道的值)算出開(kāi)始和結(jié)束的顏色，然后進(jìn)行l(wèi)inear算出中間的過(guò)渡顏色，再單獨(dú)計(jì)算alpha的變化（這應(yīng)該是錯(cuò)誤的計(jì)算方法）。
而chrome是根據(jù)rgba的4通道的rgba值，linear算出過(guò)渡部分的rgba值得到過(guò)渡部分的顏色
https://jsfiddle.net/m39n4d8v...

2017年5月18日 00:35