HTML5 Canvas 颜色区分

Question

我正在尝试使用 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;   
}

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

Edit1

我忘了提及，弹出窗口作为注入的 javascript\css 运行。

添加 HTML 源代码：

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

和完整的 CSS：

#popupCanvas
{
    position:relative;
    margin:0px;
    padding:0px;
}


#popupContainer
{
    position:absolute;
    z-index: 999999;            
    direction:ltr;
    text-align:center;
}

#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;   
}

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();
};

Answer 1

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

另一方面，我会考虑使用伪元素（请参阅此处了解一篇很棒的文章）对于箭头来说，对于这样的细节使用整个画布元素似乎有点没有必要。虽然支持可能不是很好/一致，但对于画布来说也不是，所以我想说这可能是一个很好的交换。

Answer 2

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

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

Answer 3

我无法重现这个问题。可以提供完整代码吗？

我在下面添加了一个带有稍大三角形的小提琴，并使用了非供应商前缀版本的边框半径和框阴影，以便它可以在 IE9、Opera 和 Mozilla 以及 webkit 浏览器上运行。

我还在底部 div 添加了 -5px 边距以导致重叠。

http://jsfiddle.net/thebeebs/tGzna/2/

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

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