Visualizzazione dei risultati da 1 a 3 su 3

Discussione: Colori dei segmenti con <canvas>

  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    83

    Colori dei segmenti con <canvas>

    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>

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    28,378
    Direi perché si sovrascrive prova a vedere qui https://stackoverflow.com/questions/...-arc-in-canvas credo usando benginPhat() e closePhat() e fill() risolvi
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    83
    Grazie Andrea, ho usato beginPath() e closePath(), ma invece di fill() ho usato stroke() perché si tratta di un segmento e i colori vengono eseguiti correttamente.

    lanvoel

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.