キャンバス：2つの長方形の交差点の色

Question

私はキャンバスを持っています。このキャンバスに

、私は赤い長方形でグリッドを描画する必要があります。

-firstly、私は垂直方向の長方形を描き、

-then、私は水平方向の長方形

を描くすべての矩形が同じ不透明度を持っています（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()を使用すると、全体の形状が一度に描画され、「重畳」は適用されません。

あなたは簡単でそれを修正することができます：ここで

無関係になりfixed JSFiddleあるctx.fill()を取り除くctx.fillRect()

でctx.rect()呼び出しを置き換える

• 。

  代替方法

  また、二つの異なるパスを使用することができますが、あなたは明らかに.beginPath()方法でそれらに外接する必要があるでしょう：like this。