考虑这个简单的网页:
<!DOCTYPE html><html>
<head>
<title>test</title>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas width="100" height="100" id="the-canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
context.fillStyle = 'rgba(0, 0, 255, 0.5)';
context.fillRect(0, 0, 100, 100);
</script>
</body></html>
基本上，它只包含一个<canvas/>具有半透明蓝色背景的元素。预期的行为是将其呈现为浅蓝色，因为网页的背景是白色。
它在台式机上呈现良好。
在 Android 上，它也可以很好地呈现，除了 Firefox，在 Firefox 上，它的行为就像 Canvas 下面的页面实际上是..黑色的。 最奇怪的事情是它只有在屏幕上显示 Firefox 界面的任何部分时才表现得像它!
示例如下。
行为良好 - 颜色为淡蓝色。 Firefox 界面的任何部分都不可见。
错误行为——生成的颜色突然变得太暗。请注意，当我扫动屏幕以查看地址栏时，会看到 Firefox 的界面。
这是另一个例子；这次我尝试渲染老土的雪动画来庆祝即将到来的圣诞节。为此，我在透明 Canvas 上渲染不透明的小圆圈。左侧版本 - Firefox 界面可见，圆圈有难看的抗锯齿问题；右边的版本 - 向下滚动一点后的同一页面，圆圈正确呈现。
我尝试使用各种 blending features解决这个问题，但没有成功。
最佳答案
只是想知道这是一个“网络安全”颜色问题!
关于android - Firefox for Android 和 HTML5 canvas 透明度错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20735344/