HTML5 Canvas dessin lignes multicolores

J'essaie de dessiner deux lignes parallèles sur la toile, mais il semble que les propriétés de ce dernier écrase le premier. Veuillez suggérer ce qui pourrait être faux:HTML5 Canvas dessin lignes multicolores

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

Source

2010-08-29 Amarsh

Appelez ctx.beginPath avant de tracer chaque ligne. Lorsque l'appel fort stroke est effectué, la première ligne fait toujours partie du chemin actuel, de sorte qu'elle est à nouveau dessinée dans la nouvelle couleur.

Source

2010-08-29 12:11:23

merci ça marche – Amarsh

HTML5 Canvas dessin lignes multicolores

Répondre

Questions connexes