WOW! HTML5 LIVE!
CAPITOLO PRIMOVIDEO + CANVAS    Production Ready
void drawImage(in HTMLVideoElement image,in double dx, in double dy, in optionaldouble dw, in double dh); void drawImage(i...
CAPITOLO PRIMOPRIMA DEMO   LAUNCH
CAPITOLO PRIMO    UN’EVOLUZIONEdisegnaCanvas = function(video, context){    if(video.paused || video.ended) return false; ...
CAPITOLO PRIMOSECONDA DEMO    LAUNCH
CAPITOLO SECONDOVIDEO + CANVAS   + CANVAS    Production Ready
ImageData getImageData  (in double sx, in double sy, in double  sw, in double sh);
putImageDataCANVAS        getImageDataCANVAS        drawImage (NASCOSTO) VIDEO
decomposizioneColori = function(video, context,context_nascosto, colori){     if(video.paused || video.ended) return false...
CAPITOLO SECONDOPRIMA DEMO    LAUNCH
CANVASCANVAS(NASCOSTO)VIDEO(NASCOSTO)
CAPITOLO SECONDOSECONDA DEMO   Potenziali problemi di performance          LAUNCH
CAPITOLO TERZO CANVAS +WEBSTORAGE  Production Ready
WEBSTORAGE      localStorage.setItem(...)                      data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADICAYAA...
salvaImmagine = function(evento){   var canvas = document.querySelector(canvas);   localStorage.setItem(screenshot_ + loca...
CAPITOLO TERZO    PRIMA DEMO        Potenziali problemi di performanceLAUNCH MIXER               LAUNCH GALLERY
CAPITOLO QUARTO  SHAREDWEBWORKERS    Tratta dal progetto guida
CAPITOLO QUARTOPRIMA DEMO     LAUNCHLAUNCH DASHBOARD
ENDGRAZIEsandro.paganotti@wavegroup.ithttp://www.sandropaganotti.com
HTML5 Live
Upcoming SlideShare
Loading in...5
×

HTML5 Live

2,082

Published on

HTML5 CI SIAMO!
6 demo in 30 minuti ricchi di azione! Una panoramica di impatto sugli aspetti più divertenti della specifica, tutti da mettere in pratica

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,082
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 Live

  1. 1. WOW! HTML5 LIVE!
  2. 2. CAPITOLO PRIMOVIDEO + CANVAS Production Ready
  3. 3. void drawImage(in HTMLVideoElement image,in double dx, in double dy, in optionaldouble dw, in double dh); void drawImage(in HTMLVideoElement image,in double sx, in double sy, in double sw,in double sh, in double dx, in double dy,in double dw, in double dh);
  4. 4. CAPITOLO PRIMOPRIMA DEMO LAUNCH
  5. 5. CAPITOLO PRIMO UN’EVOLUZIONEdisegnaCanvas = function(video, context){ if(video.paused || video.ended) return false; context.drawImage(video,0,0); context.drawImage(video, 125, 98, 200, 60, 0 , 98, 450, 108 ); setTimeout(function(){disegnaCanvas(video, context)},0);}
  6. 6. CAPITOLO PRIMOSECONDA DEMO LAUNCH
  7. 7. CAPITOLO SECONDOVIDEO + CANVAS + CANVAS Production Ready
  8. 8. ImageData getImageData (in double sx, in double sy, in double sw, in double sh);
  9. 9. putImageDataCANVAS getImageDataCANVAS drawImage (NASCOSTO) VIDEO
  10. 10. decomposizioneColori = function(video, context,context_nascosto, colori){ if(video.paused || video.ended) return false; context_nascosto.drawImage(video,0,0); var fotogramma = context_nascosto.getImageData(0,0, context_nascosto.canvas.width,context_nascosto.canvas.height); var fotogramma_data = fotogramma.data; for(var i=0; i < fotogramma_data.length; i+=4){ var rosso = colori.rosso.checked; if (!rosso) fotogramma_data[i ] = 0; var verde = colori.verde.checked; var blu = colori.blu.checked; if (!verde) fotogramma_data[i+1] = 0; for(var i=0; i < fotogramma_data.length; i+=4){ if (!rosso) fotogramma_data[i ] = 0; if (!blu ) fotogramma_data[i+2] = 0; if (!verde) fotogramma_data[i+1] = 0; if (!blu ) fotogramma_data[i+2] = 0; }} fotogramma.data = fotogramma_data; context.putImageData(fotogramma,0,0); setTimeout(function(){ decomposizioneColori(video, context, context_nascosto, colori) },0); }
  11. 11. CAPITOLO SECONDOPRIMA DEMO LAUNCH
  12. 12. CANVASCANVAS(NASCOSTO)VIDEO(NASCOSTO)
  13. 13. CAPITOLO SECONDOSECONDA DEMO Potenziali problemi di performance LAUNCH
  14. 14. CAPITOLO TERZO CANVAS +WEBSTORAGE Production Ready
  15. 15. WEBSTORAGE localStorage.setItem(...) data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADICAYAAACZBDir AAAgAElEQVR4Aey9B5yl2VmfeW7dyqmrK... canvas.toDataURL(...)
  16. 16. salvaImmagine = function(evento){ var canvas = document.querySelector(canvas); localStorage.setItem(screenshot_ + localStorage.length, canvas.toDataURL() );}caricaLaGallery = function(evento){ for(var x = 0; x < localStorage.length; x++) document.querySelector(div.screen_shots ).insertAdjacentHTML(afterBegin, "<img src=" + localStorage.getItem(localStorage.key(x)) + ">" );}
  17. 17. CAPITOLO TERZO PRIMA DEMO Potenziali problemi di performanceLAUNCH MIXER LAUNCH GALLERY
  18. 18. CAPITOLO QUARTO SHAREDWEBWORKERS Tratta dal progetto guida
  19. 19. CAPITOLO QUARTOPRIMA DEMO LAUNCHLAUNCH DASHBOARD
  20. 20. ENDGRAZIEsandro.paganotti@wavegroup.ithttp://www.sandropaganotti.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×