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(), …