Question

我正在使用jpeg图像和我正在绘制到图像上的矩形对图像进行注释。然后我可以将图像传输到画布上，使用for循环，我可以抓住我在图像上绘制的矩形div的边界，以便在画布上重新绘制。

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

    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值

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

1 个答案: