2010-08-29 3 views
15

Ich versuche, zwei parallele Linien auf der Leinwand zu zeichnen, aber es scheint, als ob Eigenschaften der letzteren die ersteren überschreiben. Bitte schlagen Sie vor, was falsch sein könnte:HTML5 Leinwand Zeichnung mehrfarbige Linien

<html> 
<head> 
<script type="application/javascript"> 
    function draw() { 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    // draw a 10 pix green line 
    ctx.strokeStyle='#00cc00'; 
    ctx.lineWidth=10; 
    ctx.moveTo(100,0); 
    ctx.lineTo(100,1000); 
    ctx.stroke(); 
    // draw a 20 pix red line 
    ctx.strokeStyle='#cc0000'; 
    ctx.lineWidth=20; 
    ctx.moveTo(140,0); 
    ctx.lineTo(140,1000); 
    ctx.stroke(); 
    } 
    </script> 
    </head> 
    <body onload="draw()"> 
    <div><canvas id="canvas" width="1000" height="1000"></canvas></div> 
    </body> 
    </html> 

Antwort

25

Rufen Sie vor dem Zeichnen jeder Zeile ctx.beginPath an. Wenn der starke stroke Aufruf erfolgt, ist die erste Zeile immer noch Teil des aktuellen Pfades, so dass es wieder in der neuen Farbe gezeichnet wird.

+0

danke es funktioniert – Amarsh