画布：2个矩形交叉处的颜色

Question

我有画布。

在这个画布中，我必须绘制一个带有红色矩形的网格：

- 首先，我绘制垂直矩形，

- 然后，我绘制水平矩形

每个矩形都具有相同的不透明度（0.3）。

通常情况下，由于叠加，2个矩形交叉处的颜色必须更红。

所以渲染必须是这样的：

但我的代码不起作用，因为交叉处的颜色不是红色，颜色与矩形相同（您可以尝试：https://jsfiddle.net/6urj27ua/）：

<canvas id="canvas"></canvas>

<script type="text/javascript">

//The canvas :
c = document.getElementById("canvas");
c.style.border = "solid #000000 1px";

//Size of canvas :
c.width = 300;
c.height = 300;

//The canvas context :
ctx = c.getContext("2d");


//Drawing function :
function draw()
{
    //Clear the drawing :
    ctx.clearRect(0, 0, c.width, c.height);

    /*Define size of a rect :*/
    width_rect = 20;
    height_rect = 200;

    /*Fill color for rect :*/
    ctx.fillStyle = "rgba(255, 0, 0, 0.3)";

    /*Draw 5 vertical rectangles :*/
    for(i = 0; i <= 5 ; i++)
    {
        ctx.rect(i*(width_rect*2), 0, width_rect, height_rect);
    }

    /*Draw 5 horizontal rectangles :*/
    for(i = 0; i <= 5 ; i++)
    {
        ctx.rect(0, i*(width_rect*2), height_rect, width_rect);
    }

    ctx.fill();
}


//Draw :
setInterval("draw()", 300);

</script>

那么问题是什么？

Answer 1

你快到了。但是，通过使用ctx.rect()和ctx.fill()，整个形状立即被绘制，并且没有＆＃39;叠加＆＃39;适用。

您可以通过以下方式轻松解决问题：

• 用ctx.rect()
替换ctx.fillRect()来电
• 删除无关的ctx.fill()

这是fixed JSFiddle。

替代方法

您也可以使用两个不同的路径，但是您需要使用.beginPath()方法明确限制它们：like this。