Canvas, editace fotek a jezdící Super Mario

20. 6. 2008 20:26 (aktualizováno) Martin Hassman

Opět se mi nahromadilo pár zajímavých příkladů s canvasem, tak šup sep s nimi.

Super Mario na kolech

Jacob Seidelin, který je autorem aplikací z minulého dílu, nezahálel a naprogramoval v canvasu hru další hru se Super Mariem, tentokrát se jedná o závody. BTW je to první canvasová hra, ve které proti hlavnímu hrdinovy hrají i protivníci. Jestli si dobře pamatujete, v těch minulých sice protivníci byli, ovšem stáli na místě a nic nedělali. V této hře již drandí na svých vozidlech a snaží se vám zmizet z dohledu. (Jsem zvědav, zda se následně dočkáme updatu Wolfensteina a nepřátelé v něm už nebudou jen čekat, ale i po vás střílet.)

Vyberte si jedno ze tří vozítek a rozjeďte to.

Renderování textu

Pokud potřebujete v canvasu zobrazit i text, canvas vás zatím nepotěší. Verze canvasu podporovaná v prohlížečích zobrazování textu nepodporuje (nicméně na následujícím případě.

Polární hodiny

Znáte polární hodiny? Je to zajímavá ukázka, alternativního zobrazení aktuálního data a čas. Oprava: pro člověka nečitelného zobrazení aktuálního data a času. Posuďte sami podle implementace polárních hodin v canvasu. Příklad demonstruje  i emulování canvasu v Internet Exploreru, ve kterém tento příklad také funguje.

Dokážete dešifrovat polární hodiny v cancasu?

Kolize disků

Chcete v canvasu vytvořit dynamickou aplikaci? Třeba se vám bude hodit jednoduchý příklad pro kolizi disků.

Aktualizováno:

Editujeme fotografie

A na závěr si ukážeme editor fotografií. Editace probíhá přímo v prohlížeči za pomoci JavaScriptu a canvasu. Autorem aplikace Pixastic je opět Jacob Seidelin a jedná se o praktické vyústění jeho graficků filtrů, o kterých jsem psal minule. V aplikaci můžete snadno a rychle provést základní úpravy vašich fotek. (V tuho chvíli jsou nějaké problémy s nahráváním fotek, ale vyzkoušet si můžete alespoň práci s galerií vzorových obrázků – více viz komentáře pod původním článkem.)

Beta verze editoru fotografií postaveném na canvasu.

Pro dnešek je to všechno, další příklady zase někdy příště.

Sdílet