• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 Live
 

HTML5 Live

on

  • 2,312 views

HTML5 CI SIAMO!

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

Statistics

Views

Total Views
2,312
Views on SlideShare
2,302
Embed Views
10

Actions

Likes
0
Downloads
1
Comments
0

3 Embeds 10

http://localhost 6
http://www.linkedin.com 3
http://www.docshut.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 Live HTML5 Live Presentation Transcript

    • 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(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);
    • CAPITOLO PRIMOPRIMA DEMO LAUNCH
    • 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);}
    • 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; 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); }
    • 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,iVBORw0KGgoAAAANSUhEUgAAAUAAAADICAYAAACZBDir AAAgAElEQVR4Aey9B5yl2VmfeW7dyqmrK... canvas.toDataURL(...)
    • 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)) + ">" );}
    • 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