IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Introducció

El element HTML:

<canvas>

s'utilitza per a dibuixar gràfics "on the fly" típicament utilitzant un llenguatge d'scripting sovint JavaScript. El objecte canvas normalment és només un contenidor per als gràfics i cal utilitzar un script per a pintar-hi. El suport bàsic té eines per dibuixar paths, boxes, circles, text, i afegir images però utilitzar llibreries extres com pixi.js o EaselJS es poden fer meravelles.

Suport dels navegadors

http://caniuse.com/#search=canvas

Exemple bàsic

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

Javascript

Drawing

https://www.w3schools.com/html/html5_canvas.asp

Animacions

Hi ha dos opcions:

  • setInterval: Funció bàsica de Javascript per executar de forma periòdica i continuada codi
  • Request Animation Frame: similar a l'anterior però amb millor rendiment: OPCIÓ recomanada.

Vegeu també Game Development i frameworks per al desenvolupament de jocs com Phaser

Samples

Crear un rellotge

https://www.w3schools.com/graphics/canvas_clock_start.asp

Joc sense framework només HTML5 i Canvas

Chroma

Exemple de manipulació en directe Javascript pàgina chroma (fons verd):

http://acacha.github.io/html5greenscreen/index.html
https://github.com/acacha/html5greenscreen/tree/gh-pages

Resources:

Multitouch painting

http://acacha.github.io/multitouchPaintingOnCanvas/

D3Js

Vegeu D3.js#D3js_i_Canvas

Utilització de canvas per a la creació de gràfiques

Els canvas són utilitzats en totes les llibreries de gràfiques com:

La plantilla AdminLTE utilitza llibreries de gràfiques i podeu veure exemples d'us dels canvas:

https://almsaeedstudio.com/themes/AdminLTE/pages/charts/chartjs.html

Vegeu també Graph

Canvas i D3js

Vegeu D3js i Canvas

Llibreries

Resources:

Exercici

https://medium.com/@sergiturbadenas/multimedia-253efb626603

Vegeu també

Enllaços externs