Leinwand: Farbe im Schnittpunkt von 2 Rechtecken

Question

Ich habe eine Leinwand.

In dieser Leinwand, muss ich ein Gitter mit roten Rechtecke zeichnen:

-Erstens, ich vertikale Rechtecke zeichnen,

-dann, ich horizontale Rechtecke

Jedes Rechteck haben die gleiche Opazität zeichnen (0,3).

Normalerweise muss die Farbe im Schnittpunkt von 2 Rechtecken wegen der Superposition rot sein.

Also das machen muss so sein:

Aber mein Code funktioniert nicht, weil die Farbe in Kreuzung nicht mehr rot ist, ist die Farbe die gleiche ist als ein Rechteck (man kann versuchen sie es: 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> 

Also, was ist das Problem?

Answer 1

Sie sind fast da. Aber unter Verwendung von ctx.rect() und ctx.fill() wird die gesamte Form auf einmal gezeichnet und es wird keine 'Superposition' angewendet.

Sie können es leicht beheben, indem Sie:

• ersetzt ctx.rect() Anrufe mit ctx.fillRect()
• der ctx.fill() zu entfernen, die eine fixed JSFiddle Hier ist irrelevant

wird.

Alternative Methode

Sie auch zwei verschiedene Pfade verwenden könnte, aber Sie müssen klar sie mit der Methode .beginPath() umgrenzen: like this.