Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    124

    Come lavorare su due canvas

    Vorrei lavorare su due canvas distinti, ma nel seguente codice le istruzioni che scrivo nel primo canvas, con id="lavagna1", vengono eseguite stranamente sul secondo canvas, con id="lavagna2". Come fare per indirizzare le istruzioni a ciascuno dei canvas. Grazie

    lanvoel

    codice:
    <!doctype html>
    <html>
    <body>
    <canvas id="lavagna1" width="200" height="200" style="border: 1px solid blue;"></canvas>
    <script>
    var c1=document.getElementById("lavagna1");
    var ctx=c1.getContext("2d"); 
    var tempo=0;
    var angolo=0;
    var l=100;
    avvia()
    ctx.beginPath();
    ctx.strokeStyle="blue";
    ctx.arc(l,l,50,0,2*Math.PI);
    ctx.stroke();
    function avvia()
    {
    intervallo=window.setInterval("muovi()",100);
    }
    function muovi()
    {
     ctx.clearRect(0,0,lavagna1.width,lavagna1.height);
    ctx.beginPath();
    ctx.arc(l,l,l,0,2*Math.PI);
    ctx.stroke();
    tempo=tempo+1;
    angolo=tempo*Math.PI/30;
    ctx.beginPath();
    ctx.strokeStyle="red"
    ctx.moveTo(l,l);
    ctx.lineTo(l+l*Math.cos(angolo),l+l*Math.sin(angolo));
    ctx.stroke();
    }
    </script>
    <canvas id="lavagna2" width="300" height="300" style="border: 1px solid green;"></canvas>
    <script>
    var c2=document.getElementById("lavagna2");
    var ctx=c2.getContext("2d");
    ctx.beginPath();
    ctx.fillStyle="cyan"
    ctx.arc(100,100,50,0,2*Math.PI);
    ctx.fill();
    ctx.stroke();
    </script>
    </body>
    </html>

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,288
    Semplicemente hai dichiarato due volte la variabile ctx che, essendo nello stesso contesto (globale), prende l'ultimo valore assegnatogli, il quale fa riferimento al secondo canvas:
    codice:
    var ctx=c1.getContext("2d");
    
    [...]
    
    var ctx=c2.getContext("2d");
    Forse sarebbe il caso di usare due variabili differenti.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    124
    Grazie KillerWorm. Ero così abituato all'uso frequente di ctx che la prendevo come una parola chiave

    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 © 2019 vBulletin Solutions, Inc. All rights reserved.