HTML5画布颜色区分

我正在尝试使用HTML5画布绘制一个弹出窗口。 弹出窗口由绘制箭头的画布和下方的div组成：

您可以清楚地看到，箭头的颜色比div的背景色暗。
代码被注入浏览器的每个选项卡中，并在选择文本时显示弹出窗口

以下是图纸代码：

    var ctx = $('#popupCanvas')[0].getContext("2d");
    ctx.moveTo(10, 0);
    ctx.lineTo(0, 10);
    ctx.lineTo(20, 10);
    ctx.fillStyle = "rgba(50,50,50,0.9)";
    ctx.fill();

而div的CSS是：

#popupMenu
{
    line-height: 0px;
    display:block;
    background-color:rgba(50,50,50,0.9);
    color:#ddd;      
    -webkit-box-shadow: 2px 2px 5px #555;
    -webkit-border-radius:5px;
    font-family: Century Gothic, sans-serif;    
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size:0px;
    padding:5px;
    width:345px;   
}

如您所见，颜色相同，但渲染方式不同。
我做错了什么？
为什么会有差异？我在Chrome15下使用Webkit

Edit1

我忘了提到，弹出窗口以注入javascript\css运行

添加HTML源代码：

 <div id='popupContainer'>
     <canvas id='popupCanvas' width='20' height='10'/>
     <div id='popupMenu'>
     </div>
 </div>

Edit2

以下是我在用户选择时的全部代码：

this.onTextSelected = function (selText) {
        selectedText = selText;

        // check if we have value
        var selection = window.getSelection();
        var node = document.elementFromPoint(currentMousePos.x, currentMousePos.y);
        if (node.value) {
            rect = getTextBoundingRect(node, $(node).caret().start, $(node).caret().end);
        }
        else
            rect = selection.getRangeAt(0).getBoundingClientRect();

        var bottom = rect.bottom + document.body.scrollTop;
        var left = rect.left + document.body.scrollLeft

        $("#popupContainer").css('top', bottom);

        // Div exceeds left side
        if (left - $("#popupContainer").outerWidth() / 2 < 0) {
            $("#popupContainer").css('left', left);
            // TODO: set the arrow to be left
        }

        // Div exceeds right side   
        else if (left + $("#popupContainer").outerWidth() / 2 > $(window).width()) {
            $("#popupContainer").css('left', left + rect.width - $("#popupContainer").outerWidth());
            // TODO: set the arrow to be right
        }

        else {
            $("#popupContainer").css('left', left + rect.width / 2 - $("#popupContainer").outerWidth() / 2);
        }


        $("#popupContainer").show();      

        var ctx = $('#popupCanvas')[0].getContext("2d");
        ctx.moveTo(10, 0);
        ctx.lineTo(0, 10);
        ctx.lineTo(20, 10);
        ctx.fillStyle = "rgba(50,50,50,0.9)";
        ctx.fill();
};

this.onTextSelected=函数（selText）{
selectedText=SelectText；
//检查我们是否有价值
var selection=window.getSelection（）；
var节点=document.elementFromPoint（currentMousePos.x，currentMousePos.y）；
if（节点值）{
rect=getTextBoundingRect（节点，$（节点）.caret（）.start，$（节点）.caret（）.end）；
}
其他的
rect=selection.getRangeAt（0.getBoundingClientRect（）；
var bottom=rect.bottom+document.body.scrollTop；
var left=rect.left+document.body.scrollLeft
$（“#popupContainer”）.css（'顶部'，底部）；
//Div超出左侧
if（左-$（“#popupContainer”）.outerWidth（）/2<0）{
$（“#popupContainer”）.css（'左'，左）；
//TODO:将箭头设置为左侧
}
//Div超出右侧
else if（左+$（“#popupContainer”）.outerWidth（）/2>$（window.width（））{
$（“#popupContainer”）.css（'left'，left+rect.width-$（“#popupContainer”）.outerWidth（））；
//TODO:将箭头设置为右侧
}
否则{
$（“#popupContainer”）.css（'left'，left+rect.width/2-$（“#popupContainer”）.outerWidth（）/2）；
}
$（“#popupContainer”）.show（）；
var ctx=$（'#popupCanvas'）[0].getContext（“2d”）；
ctx.moveTo（10,0）；
ctx.lineTo（0,10）；
ctx.lineTo（20,10）；
ctx.fillStyle=“rgba（50,50,50,0.9）”；
ctx.fill（）；
};

我相信这是因为弹出式背景在画布上闪闪发光（它的alpha值为0.9）。另一方面，弹出窗口本身是在浅色背景上绘制的

---

尝试修改alpha值，看看这是否是问题的原因。

我认为这是因为弹出式背景在画布上闪烁（其alpha值为0.9）。另一方面，弹出窗口本身是在浅色背景上绘制的

---

尝试修改alpha值，看看这是否是问题的原因。

我建议尝试将其定义为rgba以外的其他内容，作为潜在的修复方法，尽管这很奇怪

---

在另一点上，我会考虑使用伪元素（对于一个伟大的文章来说）的箭头，对于一个细节来说，使用整个画布元素似乎有点不必要。虽然对canvas的支持可能并不完美/一致，但对canvas也是如此，所以我认为这可能是一个很好的交换。

我建议尝试将其定义为rgba以外的其他版本，作为一个潜在的解决方案，尽管这很奇怪

---

在另一点上，我会考虑使用伪元素（对于一个伟大的文章来说）的箭头，对于一个细节来说，使用整个画布元素似乎有点不必要。虽然对canvas的支持可能并不完美/一致，但对canvas也是如此，所以我认为这可能是一个很好的交换。

我无法重现这个问题。你能提供完整的代码吗

我在下面添加了一个更大的三角形，并使用了联合国供应商的前缀版本border radius和box shadow，因此它可以跨IE9、Opera和Mozilla以及webkit浏览器工作

我还将-5px边距添加到底部div以导致重叠

在我看来，在所有主要浏览器中，三角形的颜色都很好。我所能想到的是，您在图片中使用的CSS与您在问题中添加的CSS不同（这是可能的，因为您的图像中的div有一个黑色背景），页面上嵌入代码的某些内容会影响颜色，或者箭头下方的某个内容会影响0.9 alpha

---

我还在背景中添加了一些东西，看看这是否会对画布元素和具有Alpha背景的Div产生不同的影响。。。但它似乎没有。我无法重现这个问题。你能提供完整的代码吗

我在下面添加了一个更大的三角形，并使用了联合国供应商的前缀版本border radius和box shadow，因此它可以跨IE9、Opera和Mozilla以及webkit浏览器工作

我还将-5px边距添加到底部div以导致重叠

在我看来，在所有主要浏览器中，三角形的颜色都很好。我所能想到的是，您在图片中使用的CSS与您在问题中添加的CSS不同（这是可能的，因为您的图像中的div有一个黑色背景），页面上嵌入代码的某些内容会影响颜色，或者箭头下方的某个内容会影响0.9 alpha

---

我还在背景中添加了一些东西，看看这是否会对画布元素和具有Alpha背景的Div产生不同的影响。。。但似乎没有。

恐怕图像被破坏了，你确定吗？它在这里工作，我强制刷新，所以我确定它不会从缓存中显示。不，你说得对，是过滤器在工作！你能分享注入弹出窗口的JavaScript吗？chrome做的就是注入“$（“body”）.append（contentDiv）；”我就是这样添加我的div的。恐怕图像被破坏了，你确定吗？它在这里工作，我强制刷新，所以我确定它不会从缓存中显示。不，你说得对，是过滤器在工作！你能和我分享一下吗

this.onTextSelected = function (selText) {
        selectedText = selText;

        // check if we have value
        var selection = window.getSelection();
        var node = document.elementFromPoint(currentMousePos.x, currentMousePos.y);
        if (node.value) {
            rect = getTextBoundingRect(node, $(node).caret().start, $(node).caret().end);
        }
        else
            rect = selection.getRangeAt(0).getBoundingClientRect();

        var bottom = rect.bottom + document.body.scrollTop;
        var left = rect.left + document.body.scrollLeft

        $("#popupContainer").css('top', bottom);

        // Div exceeds left side
        if (left - $("#popupContainer").outerWidth() / 2 < 0) {
            $("#popupContainer").css('left', left);
            // TODO: set the arrow to be left
        }

        // Div exceeds right side   
        else if (left + $("#popupContainer").outerWidth() / 2 > $(window).width()) {
            $("#popupContainer").css('left', left + rect.width - $("#popupContainer").outerWidth());
            // TODO: set the arrow to be right
        }

        else {
            $("#popupContainer").css('left', left + rect.width / 2 - $("#popupContainer").outerWidth() / 2);
        }


        $("#popupContainer").show();      

        var ctx = $('#popupCanvas')[0].getContext("2d");
        ctx.moveTo(10, 0);
        ctx.lineTo(0, 10);
        ctx.lineTo(20, 10);
        ctx.fillStyle = "rgba(50,50,50,0.9)";
        ctx.fill();
};