Canvas

1. HTML5
perspective multimedia

2. HTML a apărut ca limbaj de marcare în 1990,
fiind standardizat în anul 1997 ca HTML 4. Din
Decembrie 2012, autoritatea numită W3C (World
Wide Web Consortium) recomandă și susține
utilizarea HTML5 pentru că acesta creează o
experiență mai bună pentru utilizator și face
paginile mai ușor de înțeles de către browser-e.

3. Diferențele majore între HTML și
HTML5
1. HTML5 nu mai este un tot unitar. El
reprezintă o colecție de aplicații astfel încât,
pe lângă tag-uri, conține și API-uri
(Application Programming Interface) care știu
cum să trateze fiecare element media în
parte: video, audio, canvas.
2. Fișierele Audio și Video nu făceau parte din
specificațiile HTML4. În schimb, HTML5 a
creat tag-uri speciale care știu cum să trateze
elementele multimedia: [audio] și [video].

4. Diferențele majore între HTML și
HTML5
3. Geo-localizarea este aproape imposibilă în
HTML4, pe când în HTML5, cu ajutorul JS
GeoLocation API se poate detecta ușor
locația unui utilizator care accesează un site.
4. Grafică vectorială era posibilă în HTML4
doar cu ajutorul unor aplicații ca Silverlight
sau Flash. HTML5 conține suport integral
pentru grafică vectorială, prin intermediul
elementului numit [canvas].

5. Diferențele majore între HTML și
HTML5
5. Pentru că este o tehnologie nouă, HTML5 nu este
suportat momentan de toate browserele. Pe
măsură ce limbajul este pus la punct, pentru că în
acest moment încă se lucrează la el, toate
browserele vor putea citi și interpreta noul cod
HTML.
6. Pentru ca paginile să fie mult mai bine înțelese de
către motoarele de căutare, au fost introduse în
HTML5 elementele [header] și [footer] în
concordanță cu noua anatomie a web-ului.

6. Diferențele majore între HTML și
HTML5
7. Au fost introduse deasemenea în HTML5
și elementele [section] și [article] care vor
avea un impact mare în SEO pentru că
astfel pot fi delimitate mai bine porțiuni din
textul paginii.

7. Valențe FLASH în scădere
Odată cu implementarea HTML5, rolul
platformei Flash a scăzut foarte mult
pentru că nu mai este necesar în redarea
clipurilor video (aceasta fiind principala sa
funcționalitate). Același lucru se va
întâmpla și cu alte programe pe care
HTML le utiliza pentru a reda elemente
pentru care nu exista suport.

8. Motivele pentru care am utiliza HTML5
1. Accesibilitate sporită datorită elementelor noi
introduse: [section], [article], [header], [footer],
[nav], [aside]. Astfel oamenii pot mai identifica
ușor secțiunile de text care îi interesează.
2. Declarația [!Doctype] este mult mai simplă și nu
necesită introducerea unui cod lung care poate fi
uneori greșit interpretat. Noua declarație este
[!DOCTYPE HTML] și atât.
3. Codul est mult mai simplu și elegant față de
versiunile anterioare.

9. Motivele pentru care am utiliza HTML5
4. Interacțiune mai bună pentru că HTML5 nu mai este un limbaj
static. Cu ajutorul elementului [canvas] există posibilitate de a
interacționa și de a crea animații mai bune decât în Flash. Dar
mai mult decât [canvas] , HTML5 vine cu serii de API-uri care
vor ajuta la crearea unui site foarte dinamic.
5. Creare de jocuri. Tot cu ajutorul elementului [canvas] se pot
dezvolta jocuri interactive, cu funcționalități superioare Flash-
ului.
6. HTML5 este adoptat și de browser-ele telefoanelor mobile.
Există tag-uri care te ajută la optimizarea site-ului pentru
varianta mobilă.

10. Tag-uri noi HTML5
• <article>: marcheaza un articol;
• <aside>: marcheaza un continut aparte fata de
continutul paginii, dar care are legatura cu el;
• <audio>: marcheaza introducerea de continut
audio;
• <canvas>: marcheaza introducerea de continut
grafic;
• <command>: marcheaza un buton de comanda;
• <datalist>: marcheaza un meniu drop-down;

11. Tag-uri noi HTML5
• <dialog>: marcheaza un dialog, o conversatie;
• <figure>: marcheaza un grup de elemente care au
legatura unul cu celalalt si care pot fi considerate
in pagina, continut de sine statator;
• <footer>: marcheaza sectiunea footer a pagini;
• <header>: marcheaza sectiunea header a pagini;
• <hgroup>: marcheaza o sectiune a pagini;
• <keygen>: marcheaza un cod generat automat
intr-un formular;
• <mark>: marcheaza text evidentiat;

12. Tag-uri noi HTML5
• <meter>: marcheaza valoarea unei unitati de
masura cunoscute;
• <nav>: marcheaza o bara de navigare cu linkuri;
• <output>: marcheaza diferite tipuri de rezultate
ale unui script oarecare;
• <progress>: marcheaza o bara de progres fie ea
grafica sau numerica;
• <section>: marcheaza o sectiune oarecare
(header, footer, bara de navigare, capitole sau
orice alta sectiune);

13. Tag-uri noi HTML5
• <source>: marcheaza sursa fisierului
multimedia;
• <time>: marcheaza ora / data;
• <video>: marcheaza introducerea unui video;

14. Interpretări multimedia în HTML5
(video)
<video>
<source src="movie.webm" type='vid
eo/webm; codecs="vp8,
vorbis"' />
<source src="movie.mp4" type='vide
o/mp4; codecs="avc1.42E01E,
mp4a.40.2"' />
<source src="movie.ogv" type='video
/ogg; codecs="theora, vorbis"' />
Video tag not supported. Download
the
video <a href="movie.webm">her
e</a>.
<video>>

15. Interpretări multimedia în HTML5
(audio)
<audio controls>
<source src="sound.ogg"
type="audio/ogg" >
<source src="sound.mp3"
type="audio/mp3" >
Ваш браузер не пожжерживает
тег audio!
</audio>

16. Interpretări multimedia în HTML5
(canvas)
Elementul HTML5 Canvas a fost introdus pentru
prima oară de compania Apple, în anul 2004,
după care a fost standardizat în 2006 de grupul
WHATWG.
El reprezintă, efectiv, o planșă în context 2D, în
care browserele moderne pot desena un set de
forme definite prin intermediul unor metode
specifice în limbaj JavaScript.

17. Elementul HTML Canvas
• Canvas nu depinde de framework-uri
externe (orice mediu care rulează
JavaScript este de-ajuns) și este suportat
în toate browserele moderne.

18. • Este important să definiți lățimea și
înălțimea elementului înainte de
efectuarea operațiilor JavaScript specifice.
De asemenea, e de dorit, să afișați și o
atenționare utilizatorilor atunci când
browserul acestora nu suportă elementul.
<canvas id="canvasArea" width="570" height="150">
Google Chrome is awesome. Try it today!
</canvas>
Initierea elementului Canvas

19. GESTIUNI CANVAS
• Configurarea zonei de desen
• Desenarea utînd primitive grafice
• Utilizarea imaginilor
• Utilizarea schemelor de culoare și stilurilor
• Transformări
• Compoziționarea și decuparea
• Animații de baza
• Optimizarea starii elementelor canvas

20. Metode de creare a continuturilor
• fill()Fills the current drawing (path)
• stroke()Actually draws the path you have defined
• beginPath()Begins a path, or resets the current path
• moveTo()Moves the path to the specified point in the canvas,
without creating a line
• closePath()Creates a path from the current point back to the
starting point
• lineTo()Adds a new point and creates a line to that point from the
last specified point in the canvas
• clip()Clips a region of any shape and size from the original canvas
• quadraticCurveTo()Creates a quadratic Bézier curve
• bezierCurveTo()Creates a cubic Bézier curve

21. Metode de creare a continuturilor
• arc()Creates an arc/curve (used to create circles, or
parts of circles)
• arcTo()Creates an arc/curve between two tangents
• isPointInPath()Returns true if the specified point is in
the current path, otherwise false
• rect()Creates a rectangle
• fillRect()Draws a "filled" rectangle
• strokeRect()Draws a rectangle (no fill)
• clearRect()Clears the specified pixels within a given
rectangle

22. Metode de creare a continuturilor
• createLinearGradient()Creates a linear gradient (to use on
canvas content)
• createPattern()Repeats a specified element in the specified
direction
• createRadialGradient()Creates a radial/circular gradient (to
use on canvas content)
• addColorStop()Specifies the colors and stop positions in a
gradient object
• fillText()Draws "filled" text on the canvas
• strokeText()Draws text on the canvas (no fill)
• measureText()Returns an object that contains the width of
the specified text

23. Proprietati de configurare a
continuturilor
Colors, Styles, and Shadows
• fillStyleSets or returns the color, gradient, or pattern used
to fill the drawing
• strokeStyleSets or returns the color, gradient, or pattern
used for strokes
• shadowColorSets or returns the color to use for shadows
• shadowBlurSets or returns the blur level for shadows
• shadowOffsetXSets or returns the horizontal distance of the
shadow from the shape
• shadowOffsetYSets or returns the vertical distance of the
shadow from the shape

24. Proprietati de configurare a
continuturilor
Line Styles
• lineCap Sets or returns the style of the end caps for a line
• lineJoin Sets or returns the type of corner created, when two lines
meet
• lineWidth Sets or returns the current line width
• miterLimit Sets or returns the maximum miter length
Text
• Font Sets or returns the current font properties for text content
• textAlign Sets or returns the current alignment for text content
• textBaseline Sets or returns the current text baseline used when
drawing text

25. Transformari
• scale()Scales the current drawing bigger or
smaller
• rotate()Rotates the current drawing
• translate()Remaps the (0,0) position on the
canvas
• transform()Replaces the current transformation
matrix for the drawing
• setTransform()Resets the current transform to
the identity matrix.

26. Alte functionalitati
• save()
• contextrestore()
• createEvent()
• getContext()
• toDataURL()

28. Exemple canvas animatii
• https://developer.mozilla.org/en-
US/docs/Web/API/Canvas_API/Tutorial/Basic_
animations

29. Utilizarea imaginilor în Canvas
<script>
var exm = document.getElementById("example");
ctx = exm.getContext('2d');
//--------------------------
pic = new Image();
pic.src = 'nocopypast.png';
//--------------------------
pic.onload = function() {
ctx.drawImage(pic, 0, 0);
}
</script>
drawImage(image, x, y, width, height)

30. Conținuturi images
img.src =
'data:image/gif;base64,R0lGODlhDAAMAOYAANPe5Pz//4KkutDb4sz
Y3/b+/5u5z/3//3KWrfn//8rk8naasYGkuszY4Mbg8qG+0dzv9tXg5sTg
8t/o7vP8/4iqv9ft9NPe5qfD1Mfc56O/0YKlu+Lr8M3Z4JCwxuj2/Of0+
eDz9+rw9Z68z8/n8sHe8sbT3Ju6zuDv96nE1Onw9Nbh6cvX39Hq89H
q8u77/srW3tbh54Kku8ba56TD1u37/vL8/vL8/9ft9ebu8+Ps8bzM1Y
msw7XR4Nnj6Yanvsnj8qrI2Or2/NTf5tvl68vY3+r3/HqdtNji6OXt8eDz
+dLc477c7bDO3t7n7d7v9s3Z4dbs9N/y98Pd6PX+/8/b4f7//+Hp7tDo
8vv//+fu84GjunKWro6uxHqctOfu9P///wAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAACH5BAAAAAAALAAAAAAMAAwAAAeEgCJfg4RfWlo5K
lpgjI2OOklWBwcBAVmXCQlXHAUFVBkGBjMUNzZOEy81IF2sXUZCH0
QrDyhPGzICAkohUj4XHhoQKQsLGDgWUTFIJxUjUy0uWNIkQxE9W9
gMDD9BCgpLAEBNXl5H5F40DlUDEkxc71wICDwlDQBQHQ0EBEUsJjs
wBgQCADs=';

31. AJAX transmiterea conținutului
$.ajax({
type: "POST",
url: "script.php",
data: { imgBase64: dataURL } })
.done(function(o) { console.log('saved');
});

32. <?
php $upload_dir = somehow_get_upload_dir();
$img = $_POST['my_hidden'];
$img = str_replace('data:image/png;base64,',
'',$img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir."image_name.png";
$success = file_put_contents($file, $data);
header('Location: '.$_POST['return_url']);
?>

33. globalCompositeOperation

34. cliping

35. Interpretări multimedia în HTML5
(animații)
HTML5 elemente (DOM)
+
JavaScript
=
animație

36. INSTRUMENTE DEREALIZARE A
ANIMAȚIEI (Web-Drawing)
• jQuery.animate
• Adobe Edge Animation;
• Paper.js ;
• WebGL
• TreeJs
• Processing.js ;
• Raphael.js;
• ...

37. JavaScript (jQuery)
• Schimbi sau ștergi conținutul unei pagini
întregi sau doar a unei porțiuni din pagină;
• Animații;
• Efecte (SlideUp/SlideDown, FadeIn/FadeOut,
etc);
• Ajax;
• Adaugi diverse event-uri (click, hover, over,
focus etc) cam pe orice element din pagină;
• Reduce la minim codul Javascript din
pagină.

38. Diferențe dintre Flash și Edge
(avantage)
• Stabilitatea;
• Instrumente de Timeline;
• Simboluri setate opțional;
• Copierea animație;
• Capacitatea de a muta obiecte pe scena, fara a
afecta animația;
• Ușurința la modificare componentelor;
• Easing presets și Code presets;

39. Bibliografie
• Rowell E. - HTML5 Canvas
• Williams L.J. - Learning HTML5 Game Programming. A
Hands-on Guide to Building Online Games Using
Canvas, SVG, and WebGL
• Hawkes R. - Foundation HTML5 Canvas. For Games and
Entertainment
• Fulton S., Fulton J. - HTML5 Canvas
• Flanagan D. - Canvas Pocket Reference. Scripted
Graphics for HTML5
• https://www.w3schools.com/tags/ref_canvas.asp
• http://www.html5canvastutorials.com/