Sto usando il tag <canvas> … </canvas>.
Ho disegnato quattro segmenti e quattro rettangoli indicando per ciascuno il colore e in più per ogni segmento e per ogni rettangolo ho messo la scritta del colore.
Ho notato che le istruzioni per i colori dei rettangoli: ctx.fillStyle="red";
e le istruzioni dei colori delle scritte: ctx.fillText("red",10,90);
funzionano perfettamente, mentre per le istruzioni dei colori dei segmenti:
ctx.strokeStyle="red";
ctx.strokeStyle="blue";
ctx.strokeStyle="green";
ctx.strokeStyle="magenta";
succede, stranamente, che solo l'ultimo colore (il magenta) viene eseguito, ma gli altri segmenti hanno colori non definibili. Desidererei sapere perché. Grazie.
lanvoel
codice:
<!doctype html>
<html lang="it">
<head>
<title> canvas: colori segmenti </title>
<body>
<canvas id="lavagna" width="400" height="400" style="border:1px solid maroon"></canvas>
<script>
var c = document.getElementById('lavagna');
var ctx = c.getContext("2d");
ctx.strokeStyle="red";
ctx.moveTo(10,80);
ctx.lineTo(190,80);
ctx.stroke();
ctx.fillStyle="red";
ctx.fillText("red",10,90);
ctx.strokeStyle="blue";
ctx.moveTo(10,160);
ctx.lineTo(190,160);
ctx.stroke();
ctx.fillStyle="blue";
ctx.fillText("blue",10,170);
ctx.strokeStyle="green";
ctx.moveTo(10,240);
ctx.lineTo(190,240);
ctx.stroke();
ctx.fillStyle="green";
ctx.fillText("green",10,250);
ctx.strokeStyle="magenta";
ctx.moveTo(10,320);
ctx.lineTo(190,320);
ctx.stroke();
ctx.fillStyle="magenta";
ctx.fillText("magenta",10,330);
ctx.fillStyle="red";
ctx.fillRect(210,80,180,40);
ctx.fillText("red",210,130);
ctx.fillStyle="blue";
ctx.fillRect(210,160,180,40);
ctx.fillText("blue",210,210);
ctx.fillStyle="green";
ctx.fillRect(210,240,180,40);
ctx.fillText("green",210,290);
ctx.fillStyle="magenta";
ctx.fillRect(210,320,180,40);
ctx.fillText("magenta",210,370);
</script>
</body>
</html>