HTML5 okiem .NET-owca - odc. 2

W tym odcinku trochę o Canvas i multimediach w HTML5.

Canvas

Rysowanie

if (canvas.getContext)

ctx = canvas.getContext(“2d”);

• beginPath()
• moveTo(a,b)
• lineTo(a,b)
• closePath() - zamyka kształt bez rysowania
• fillStyle = “#0099ff”
• fill() - zamyka łamaną i wypełnia otoczone wnętrze
• fillRect(a,b, width, height)
• clearRect(a,b,width, height)
• strokeRect(a,b,width,height)
• lineWidth
• lineJoin = “round”
• lineCap = “round”
• strokeStyle = “#cccccc”
• stroke()
• drawImage(img, a, b)
• createRadialGradient(x1, y1, r1, x2, y2, r2)
• arc(x,y,r, angle1, angle2, anticlockwise)
• font = “300px Segoe UI”
• fillText(text, x,y)

Kolejność poleceń odnośnie wypełnienia i obramowania ma znaczenie

img.onload = function() { context.drawImage(img, 0,0); … }

img.scr = “…”;

Tworzenie gradientu

var g1 = ctx.createRadialGradient(160, 120, 0, 320, 220, 300);

g1.addColorStop(0, “#ffffff”);

g1.addColorStop(1, “#0033cc”);

Transformaty

ctx

• scale(a,b)  np. ctx.scale(.5,.5); ctx.scale(2,2) - rozmiar samego canvas się nie zmienia, skaluje się jego zawartość (względem lewego górnego rogu)
• rotate(angle) np. ctx.rotate(.1); - kąt w radianach
• translate(x,y)
• setTransform(scale_x, rotate_angle, skew_s, scale_y, trans_x, trans_y)

<canvas …>

<img …/>

</canvas>

Zapisywanie ustawień kontekstu

• ctx.save() - wielokrotne wywołanie powoduje przechowywanie ustawień na stosie!
• ctx.restore()

Rysowanie jest całkiem niezłe, choć dla mnie trochę szkoda, że powstałe dynamicznie efekty nie odpowiadają jakimś konstrukcjom deklaratywnym, no ale nie jest to Silverlight, gdzie deklaratywny XAML jest w 99% reprezentantem klas imperatywnego C# czy VB.NET –:)

Animacje

var frame;

frame = setInterval(“draw()”, 25);  - wykonywanie co 25ms

draw() {

if() { }

else {  clearInterval(frame); }

}

Animacje może i prosto się je tworzy w Canvas, ale kojarzy mi się z czasami, gdzie operowało się na timerach. Brakuje mi tu trochę bardziej wysokopoziomego podejścia w stylu Storyboard i różnego rodzaju animacji w Silverlight (wiem, że są animacje także w CSS3, jak będę o nich za jakiś czas pisał, to wrócę do tego tematu).

Screenshoty z odtwarzanego video

Takie same demo było kiedyś pokazywane dla Silverlight i WP7 z użyciem WriteableBitmap, a tu proszę za pomocą Canvas w HTML5 możemy ot tak sobie narysować coś z odtwarzanego video i wynik zamienić na zwykły obrazek. Wydaje się to nawet prostsze!

Media

Natywne formaty

Audio

• WAV
• MP3
• Ogg Vorbis

Video

• WebM
• H.264 (MP4)
• Ogg Theora

Nie każda przeglądarka wspiera każdy format, najlepiej kodować w kilku –:)

<video controls=”controls” loop preload>

<source src=”video.mp4”/>

<source src=”video.ogv”/>

<source src=”video.webm”/>

<p>Ta przeglądarka nie obsługuje natywnego video</p>

</video>

video

• autoplay
• loop
• poster=”image.png” - obrazek przed odtwarzaniem video
• preload

<audio controls>

<source src=”audio.mp3”/>

<source src=”audio.ogg”/>

<source src=”audio.wav”/>

<object …/>  - np. Flash

</audio>

audio

• autoplay
• loop
• preload

Własne sterowanie

• play/stop/pause
• przewijanie do przodu/wstecz/do początku/do końca
• głośność
• wyłączenie dźwięku
• szybkość odtwarzania

Pamiętam jak cieszyłem się z tego wraz z wprowadzeniem tej funkcjonalności zmiany tempa odtwarzania w Silverlight 5, jak widać HTML5 daje taką samą możliwość.

var video = document.querySelector(“#vid”);  //nowy selektor HTML

var stop = $(“#stop”);  //selektor jQuery

Dynamiczne ładowanie

<video id=”vid”  firstfile=”file1” secondfile=”file2” controls> … </video>