在 Canvas 上分层矩形会导致不透明度增加

Question

我正在使用 jpeg 图像和在图像上绘制的矩形对图像进行注释。然后我可以将图像传输到 canvas，并且使用 for 循环，我可以抓取我在图像上绘制的矩形 div 的边界以在 canvas.

当我有多个矩形时会出现问题，因为每个后续矩形的不透明度都会降低，因为它们是分层的，因此：`

    function drawRectangleToCanvas(left, top, width, height, canvas, context, opacity) { 

    context.globalCompositeOperation='destination-over';
    context.strokeStyle = 'rgba(0,255,130,0.7)';
    context.fillStyle = 'rgba(0,0,255,'+opacity+')';
    context.rect(left, top, width, height);
    context.setLineDash([2,1]);
    context.lineWidth = 2;
    context.fill();
    context.stroke();

    }

根据我的理解，context.globalCompositeOperation='destination-over' 导致矩形像面包片一样放置在图像上。对于在 div 上绘制的每个矩形，不透明度重叠，导致不透明度增加一个因子，在本例中为 0.1。这是问题的样子：Canvas with layered rectangles and opacity problems.

我怎样才能添加所有的矩形而不出现这个不透明问题？我为我拥有的每个矩形调用此方法，所以我不知道是否可以将所有矩形放在一个数组中或什么。任何解决此问题的建议都会有所帮助。

编辑：最暗的矩形是第一个绘制的，只是为了添加一些信息。

Answer 1

不完全确定你想要什么，但你可以在定义所有矩形之前省略对 stroke 和 fill 方法的调用。

    // Not much left to do in the function but just here to illustrate
    // that creating the rectangles should be put together
    function drawRectangleToCanvas(left, top, width, height, canvas, context){ 
        context.rect(left, top, width, height);
    }

    context.globalCompositeOperation='destination-over';
    context.strokeStyle = 'rgba(0,255,130,0.7)';
    context.fillStyle = 'rgba(0,0,255,'+opacity+')';
    context.setLineDash([2,1]);
    context.lineWidth = 2;
    context.beginPath();
    while(??? ){
        // loop and define all the rectangles 
        drawRectangleToCanvas(...  //
    }
    // once all the rectangles are defined 
    // call the fill and stroke to render them
    context.fill();
    context.stroke();

这将阻止他们复合 alpha 值

在 Canvas 上分层矩形会导致不透明度增加

Layering Rectangles on a Canvas Causes Opacity to Increase

html

javascript

css

canvas

opacity