2010-08-29 21 views
15

Tuvalde iki paralel çizgi çizmeye çalışıyorum, ancak sanki özellikleri eski üzerine yazıyormuş gibi görünüyor. Lütfen neyin yanlış olabileceğini öneriniz:HTML5 Tuval çizimleri çok renkli çizgiler

<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> 

cevap

25

Her satırı çizmeden önce ctx.beginPath'u arayın. Güçlü stroke çağrısı yapıldığında, ilk satır hala geçerli yolun bir parçasıdır, böylece yeni renkte tekrar çizilir.

+0

teşekkürler – Amarsh