Question

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

HTML5 Canvas color difference

正如您可以清楚地看到的那样，箭头的颜色比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

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

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

Answer 2

我建议尝试用rgba之外的其他东西来定义它作为潜在的修复，尽管它很奇怪。

另一方面，我考虑使用一个伪元素（参见here获得一篇好文章）作为箭头，似乎有点不必使用整个画布元素来获得这样的细节。虽然支持可能不是很棒/一致，但对于画布来说也不是这样，所以我认为这可能是一个很好的交换。

Answer 3

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

我在下面添加了一个较小的三角形，并使用了非供应商前缀版本的border-radius和box shadow，以便它可以在IE9，Opera和Mozilla以及webkit浏览器中运行。

我还在底部div添加了一个-5px的边距，导致重叠。

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

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

我还在后台添加了一些东西，看看这是否会影响Canvas元素和Div的Alpha背景不同......但它似乎没有。

HTML5 Canvas颜色差异化

3 个答案: