Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 Live

2,811 views

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
  • Be the first to comment

  • Be the first to like this

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

×