Category Archives: Canvas

Orologio digitale 2

...

Orologio digitale 1


...

Coordinate






Per cominciare

L’oggetto canvas si confonde con lo sfondo


La cornice (nera) continua di un pixel


La cornice blu e lo sfondo giallo



Accedo agli attributi



Accedo al contesto grafico 2d.

Testi

Proprietà

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

Metodi

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

Riepilogo Canvas

  1. g2d.arc(x, y,radius,startAngle,endAngle), …
    • g2d.arc(x, y,radius,startAngle,endAngle, anticlockwise), …
  2. g2d.beginPath(), …
  3. g2d.clearRect(x1,y1,d1,d2), …
  4. g2d.closePath(), …
  5. img=g2d.createImageData()
  6. img.data(), …
  7. g2d.drawImage(…), …
  8. canvas=getElementById(“…”), riferimento all’oggetto CANVAS
  9. g2d.fill(), …
  10. g2d.fillStyle, …
  11. g2d.fillText(…), …
  12. g2d.fillRect(x1,y1,d1,d2), …
  13. g2d.font, …
  14. g2d=canvas.getContext(“2d”), contesto grafico 2d della canvas
  15. img=g2d.getImageData(…)
  16. canvas.height, …
    • img.height(), …
  17. g2d.lineTo(x,y), …
  18. g2d.moveTo(x,y), …
  19. g2d.putImageData(…)
  20. g2d.stroke(), …
  21. g2d.strokeRect(x1,y1,d1,d2), …
  22. g2d.strokeText(…), …
  23. g2d.textAlign, …
  24. g2d.textBaseline(…), …
  25. canvas.width, …
    1. img.width(), …