Canvas « ValCon >> WWW

Category Archives: Canvas

Orologio digitale 2

Posted on 21/01/2019 by admin

Comments off

<canvas id="canvas2" width="300" height="100"></canvas>

<script>
canvas=document.getElementById("canvas2");
w=canvas.width ; w2=w/2;
h=canvas.height; h2=h/2;
//----------------------------------------
g2d=canvas.getContext("2d");
g2d.textAlign="center";
g2d.fillStyle="blue";
//----------------------------------------
setInterval("orario2()",500);
//---------------------------------------------------------------------------------------------------
var s_mesi  =new Array("gennaio", "febbraio", "marzo", "aprile", "maggio", "giugno", 
                       "luglio", "agosto", "settembre", "ottobre", "novembre", "dicembre");
var s_giorni=new Array("Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"); 
//---------------------------------------------------------------------------------------------------
function orario2()
{
  var data   =new Date()        ;	
  var ore    =data.getHours()   ; if(ore     < 10) ore    ="0"+ore    ;
  var minuti =data.getMinutes() ; if(minuti  < 10) minuti ="0"+minuti ;
  var secondi=data.getSeconds() ; if(secondi < 10) secondi="0"+secondi;
  var da0a6  =data.getDay()     ;
  var giorno =data.getDate()    ;
  var mese   =data.getMonth()   ;
  var anno   =data.getFullYear();
  var strOra =ore + ":" + minuti + ":" + secondi; 
  var strData=s_giorni[da0a6]+" "+giorno+" "+s_mesi[mese]+" "+anno;
  //---------------------------------------------------------------
  g2d.clearRect(0,0,w,h) ;
  g2d.font="24px Courier"; g2d.fillText(strOra ,w2,h2-6 );
  g2d.font="16px Courier"; g2d.fillText(strData,w2,h2+18);
}
</script>

canvas=document.getElementById("canvas2");

w=canvas.width ; w2=w/2;

h=canvas.height; h2=h/2;

//----------------------------------------

g2d=canvas.getContext("2d");

g2d.textAlign="center";

g2d.fillStyle="blue";

//----------------------------------------

setInterval("orario2()",500);

//---------------------------------------------------------------------------------------------------

var s_mesi =new Array("gennaio", "febbraio", "marzo", "aprile", "maggio", "giugno",

"luglio", "agosto", "settembre", "ottobre", "novembre", "dicembre");

var s_giorni=new Array("Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato");

//---------------------------------------------------------------------------------------------------

function orario2()

{

var data =new Date() ;

var ore =data.getHours() ; if(ore < 10) ore ="0"+ore ;

var minuti =data.getMinutes() ; if(minuti < 10) minuti ="0"+minuti ;

var secondi=data.getSeconds() ; if(secondi < 10) secondi="0"+secondi;

var da0a6 =data.getDay() ;

var giorno =data.getDate() ;

var mese =data.getMonth() ;

var anno =data.getFullYear();

var strOra =ore + ":" + minuti + ":" + secondi;

var strData=s_giorni[da0a6]+" "+giorno+" "+s_mesi[mese]+" "+anno;

//---------------------------------------------------------------

g2d.clearRect(0,0,w,h) ;

g2d.font="24px Courier"; g2d.fillText(strOra ,w2,h2-6 );

g2d.font="16px Courier"; g2d.fillText(strData,w2,h2+18);

}

</script>

...

Orologio digitale 1

Posted on 21/01/2019 by admin

Comments off

<canvas id="canvas1" width="200" height="100">
</canvas>

<script>
canvas=document.getElementById("canvas1");
w=canvas.width ; w2=w/2
h=canvas.height; h2=h/2
//--------------------------------------------------------------------
g2d=canvas.getContext("2d")
g2d.textAlign="center"
g2d.fillStyle="blue";
g2d.font="24px Courier";
//--------------------------------------------------------------------
setInterval("orario1()",500);
//--------------------------------------------------------------------
function orario1()
{
  var data   =new Date();	
  //------------------------------------------------------------------
  var ore    =data.getHours()  ; if(ore     < 10) ore    ="0"+ore    ;
  var minuti =data.getMinutes(); if(minuti  < 10) minuti ="0"+minuti ;
  var secondi=data.getSeconds(); if(secondi < 10) secondi="0"+secondi;
  //------------------------------------------------------------------
  var strOra =ore + ":" + minuti + ":" + secondi; 
  //------------------------------------------------------------------
  g2d.clearRect(0,0,w,h);
  g2d.fillText(strOra ,w2,h2+8);
}
</script>

</canvas>

canvas=document.getElementById("canvas1");

w=canvas.width ; w2=w/2

h=canvas.height; h2=h/2

//--------------------------------------------------------------------

g2d=canvas.getContext("2d")

g2d.textAlign="center"

g2d.fillStyle="blue";

g2d.font="24px Courier";

//--------------------------------------------------------------------

setInterval("orario1()",500);

//--------------------------------------------------------------------

function orario1()

{

var data =new Date();

//------------------------------------------------------------------

var ore =data.getHours() ; if(ore < 10) ore ="0"+ore ;

var minuti =data.getMinutes(); if(minuti < 10) minuti ="0"+minuti ;

var secondi=data.getSeconds(); if(secondi < 10) secondi="0"+secondi;

//------------------------------------------------------------------

var strOra =ore + ":" + minuti + ":" + secondi;

//------------------------------------------------------------------

g2d.clearRect(0,0,w,h);

g2d.fillText(strOra ,w2,h2+8);

}

</script>

...

Coordinate

Posted on 21/01/2019 by admin

Comments off

<canvas id="canvas1" 
        width="300" height="200"
        style="border:1px solid">
</canvas>

<script>
   canvas=document.getElementById("canvas1");

   g2d=canvas.getContext("2d");
   g2d.moveTo(25,50);
   g2d.lineTo(200,100);
   g2d.stroke();
</script>

<canvas id="canvas1"

width="300" height="200"

style="border:1px solid">

</canvas>

canvas=document.getElementById("canvas1");

g2d=canvas.getContext("2d");

g2d.moveTo(25,50);

g2d.lineTo(200,100);

g2d.stroke();

</script>

…

<canvas id="canvas2" 
        width="300" height="200">
        style="border:1px solid">
</canvas>

<script>
   canvas=document.getElementById("canvas2");
   w=canvas.width;
   h=canvas.height;

   g2d=canvas.getContext("2d");
   g2d.moveTo(0,0); 
   g2d.lineTo(w,h);
   g2d.moveTo(w,0); 
   g2d.lineTo(0,h);
   g2d.stroke();
</script>

<canvas id="canvas2"

width="300" height="200">

style="border:1px solid">

</canvas>

canvas=document.getElementById("canvas2");

w=canvas.width;

h=canvas.height;

g2d=canvas.getContext("2d");

g2d.moveTo(0,0);

g2d.lineTo(w,h);

g2d.moveTo(w,0);

g2d.lineTo(0,h);

g2d.stroke();

</script>

…

<canvas id="canvas3" 
        width="300" height="200" 
        style="border:1px solid">
</canvas>

<script>
   canvas=document.getElementById("canvas3");
   w=canvas.width;   w2=w/2;
   h=canvas.height;  h2=h/2;

   g2d=canvas.getContext("2d");
   g2d.beginPath();
   g2d.strokeStyle="red";
   g2d.lineWidth=5;
   g2d.moveTo(0,0); g2d.lineTo(w,h);
   g2d.moveTo(w,0); g2d.lineTo(0,h);
   g2d.stroke();
   g2d.beginPath();
   g2d.strokeStyle="blue";
   g2d.lineWidth=3;
   g2d.moveTo(w2,0); g2d.lineTo(w2,h);
   g2d.moveTo(0,h2); g2d.lineTo(w,h2);
   g2d.stroke();
</script>

<canvas id="canvas3"

width="300" height="200"

style="border:1px solid">

</canvas>

canvas=document.getElementById("canvas3");

w=canvas.width; w2=w/2;

h=canvas.height; h2=h/2;

g2d=canvas.getContext("2d");

g2d.beginPath();

g2d.strokeStyle="red";

g2d.lineWidth=5;

g2d.moveTo(0,0); g2d.lineTo(w,h);

g2d.moveTo(w,0); g2d.lineTo(0,h);

g2d.stroke();

g2d.beginPath();

g2d.strokeStyle="blue";

g2d.lineWidth=3;

g2d.moveTo(w2,0); g2d.lineTo(w2,h);

g2d.moveTo(0,h2); g2d.lineTo(w,h2);

g2d.stroke();

</script>

…

Per cominciare

Posted on 21/01/2019 by admin

Comments off

<canvas id="canvas1" 
        width="300" height="200">
</canvas>

<canvas id="canvas1"

width="300" height="200">

</canvas>

L’oggetto canvas si confonde con lo sfondo

<canvas id="canvas2" 
        width="300" height="200"
        style="border:1px solid">
</canvas>

<canvas id="canvas2"

width="300" height="200"

style="border:1px solid">

</canvas>

La cornice (nera) continua di un pixel

<canvas id="canvas3" 
        width="300" height="200"        
        style="background-color:yellow;border:3px solid blue">        
</canvas>

<canvas id="canvas3"

width="300" height="200"

style="background-color:yellow;border:3px solid blue">

</canvas>

La cornice blu e lo sfondo giallo

<canvas id="canvas4" 
        width="300" height="200">        
</canvas>

<script>
   canvas=document.getElementById("canvas4");
   canvas.style="background-color:yellow;border:3px solid blue";
</script>

<canvas id="canvas4"

width="300" height="200">

</canvas>

canvas=document.getElementById("canvas4");

canvas.style="background-color:yellow;border:3px solid blue";

</script>

Accedo agli attributi

<canvas id="canvas5" 
        width="300" height="200">        
</canvas>

<script>
   canvas=document.getElementById("canvas5");
   canvas.style="background-color:yellow;border:3px solid blue";

   g2d=canvas.getContext("2d");
   g2d.fillRect(25,50,100,50)
</script>

<canvas id="canvas5"

width="300" height="200">

</canvas>

canvas=document.getElementById("canvas5");

canvas.style="background-color:yellow;border:3px solid blue";

g2d=canvas.getContext("2d");

g2d.fillRect(25,50,100,50)

</script>

Accedo al contesto grafico 2d

Testi

Posted on 20/01/2019 by admin

Comments off

Proprietà

g2d.direction=”…”
g2d.fillStyle=”…”, le caratteristiche del riempimento
g2d.font=”…”, le caratteristiche del font da utilizzare, nello stile di CSS ma con delle limitazioni
g2d.strokeStyle=”…”, le caratteristiche del contorno
g2d.textAlign=”…”
1. “left”, “center”, “right”
2. “start”, “end”
g2d.textBaseline=”…”
…

Metodi

g2d.fillText(…), scrive il testo, alla posizione
1. text, testo
2. x, colonna
3. y, riga
g2d.mesureText(“…”)
g2d.strokeText(…), scrive il contorno del testo
1. text, testo
2. x, colonna
3. y, riga

g2d.fillText("Ciao mondo!",50, 50); // Scrive "Ciao mondo!" alla colonna 50 e riga 50
g2d.fillText("Ciao mondo!",50,100); // Scrive "Ciao mondo!" alla colonna 50 e riga 100
g2d.textAlign="center";             // Centra il testo
g2d.fillText("Ciao mondo!", 
              canvas.width/2, 
              canvas.height/2);     // Scrive al centro della canvas

g2d.font="30px Arial";              // Imposta il font a "Arial" con altezza 30 pixel

g2d.fillText("Ciao mondo!",50, 50); // Scrive "Ciao mondo!" alla colonna 50 e riga 50

g2d.fillText("Ciao mondo!",50,100); // Scrive "Ciao mondo!" alla colonna 50 e riga 100

g2d.textAlign="center"; // Centra il testo

g2d.fillText("Ciao mondo!",

canvas.width/2,

canvas.height/2); // Scrive al centro della canvas

g2d.font="30px Arial"; // Imposta il font a "Arial" con altezza 30 pixel

Riepilogo Canvas

Posted on 20/01/2019 by admin

Comments off

g2d.arc(x, y,radius,startAngle,endAngle), …
- g2d.arc(x, y,radius,startAngle,endAngle, anticlockwise), …
g2d.beginPath(), …
g2d.clearRect(x1,y1,d1,d2), …
g2d.closePath(), …
img=g2d.createImageData()
img.data(), …
g2d.drawImage(…), …
canvas=getElementById(“…”), riferimento all’oggetto CANVAS
g2d.fill(), …
g2d.fillStyle, …
g2d.fillText(…), …
g2d.fillRect(x1,y1,d1,d2), …
g2d.font, …
g2d=canvas.getContext(“2d”), contesto grafico 2d della canvas
img=g2d.getImageData(…)
canvas.height, …
- img.height(), …
g2d.lineTo(x,y), …
g2d.moveTo(x,y), …
g2d.putImageData(…)
g2d.stroke(), …
g2d.strokeRect(x1,y1,d1,d2), …
g2d.strokeText(…), …
g2d.textAlign, …
g2d.textBaseline(…), …
canvas.width, …
1. img.width(), …
…