极客观点
项目管理
HarmonyOS
做了一个渐变的背景色（半透明），但是在Firefox和Chrome上显示不一致，请问是我漏了什么么？
<!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
html5
经实测，firefox对LinearGradient的实现有区别
firefox似乎是(以黑色背景配合alpha透明度通道的值)算出开始和结束的颜色，然后进行linear算出中间的过渡颜色，再单独计算alpha的变化（这应该是错误的计算方法）。
而chrome是根据rgba的4通道的rgba值，linear算出过渡部分的rgba值得到过渡部分的颜色
https://jsfiddle.net/m39n4d8v...