Utilizzo cookies
L'e-book interattivo I colori Comandi base save() & restore() Stili di linee Rettangoli Archi e Circonferenze clip() Colori gradienti e stili Effetti Ombra Curve di Bezier Testo Trasformazioni Disegnare con Immagini Manipolazione dei Pixel Alpha trasparenza globalCompositeOperation convertire <canvas> Animazioni Grafici 20 Equazioni e spirali

HTML5 canvas in tempo reale


Testo

  • font imposta o restituisce le proprietà del tipo di carattere.
    Gli attributi dei font sono:

    font-style: normal,italic,oblique
    font-variant: normal,small-caps
    font-weight: normal,bold.bolder,lighter,100 ......900
    font-size:    Dimensione dei font in pixel
    font-family  Setdel font family
    caption: Carattere utilizzato per didascalie, pulsanti ecc.
    icon: Tipo di carattere usato per le icone di etichette
    menu: Tipo di carattere usato per menu
    message-box: Tipo di carattere usato per box messaggi
    small-caption: Carattere utilizzato nella scrittura di piccoli controlli
    status-bar:    Tipo di carattere usato per window status bar
    Il formato base è:
    [font style] [font weight] [font size] [font face]
    Esempi:
    font = "italic bold 24px serif";
    font = "normal lighter 50px cursive";

  • textAlign imposta o restituisce l'allineamento per il contenuto testuale
    Valori disponibili:

  • textBaseline imposta o restituisce l'attuale linea di base del testo.
    Valori disponibili
  • fillText() Disegna il testo, con riempimento, sul <canvas>
    Il colore utilizzato è impostato nella proprietà context.fillColor.
    Il font utilizzato è impostato nella proprietà context.font
    Parametri
    fillText ([text], [x], [y], [maxwidth]);
    text - Il testo di rendere sul <canvas>.
    x - La posizione x del testo su <canvas>.
    y - La posizione y del testo su <canvas>.
    maxwidth - La larghezza massima del testo come reso sul <canvas> (facoltativo).
  • strokeText() Disegna il testo sul <canvas> (nessun riempimento)
    Il font utilizzato è impostato nella proprietà context.font
    Parametri
    fillText ([Testo], [x], [y], [maxwidth]);
    text - Il testo di rendere sul <canvas>.
    x - La posizione x del testo sulla <canvas>.
    y - La posizione y del testo sulla <canvas>.
  • measureText() controlla il testo e restituisce un oggetto che contiene la sua larghezza, in pixel.

 




Questo e-book è un e-book interattivo, ciò significa che il lettore può inserire dei dati nelle pagine ed il contenuto di queste si adeguerà ai nuovi valori. Per inserire i dati, nelle pagine dell’e-book, sono stati implementati dei controlli simili a quelli che si possono trovare sulle pagine Internet ed un pulsante esegui per impartire il comando di adeguare il contenuto della pagina ai nuovi valori.
Antonella Brandi
Art-designer