canvas

Podívejme se na canvas z HTML5. Předvedeme si kreslení základních tvarů, cest, barevných přechodů a používání obrázků. Nakonec zkusíme v canvasu naprogramovat hru Halma.

V tomto dílu Javaskriptaření si ukážeme další zajímavé knihovny a nástroje, které v javaScriptu existují a které můžete využít ve svých aplikacích. Tentokrát je ocení vývojáři interaktivních grafických aplikací, třeba her – představíme si fyzikální engine, implementaci Processing a oblíbenou 3D knihovnu WebGL.

Videopřehrávač, zabudovaný přímo do specifikace HTML5, není jen pokusem nahradit „asfaltovou skvrnu“ přehrávačů ve Flashi. To, že video není přehráváno v pluginu, znamená, že s ním lze přímo manipulovat pomocí webových technik (JavaScript apod.) Dnes si ukážeme některé efekty, které lze s přehrávaným videem provádět.

Před nedávnem jsme si na těchto stránkách představili grafickou knihovnu Raphaël, která umožňuje jednoduše vytvářet vektorovou grafiku. Používá k tomu SVG (či VML). Podobně funguje i knihovna, kterou si představíme dnes, jenom místo SVG pracuje nad Canvasem. Hlavní výhodou je schopnost používat vrstvy.

Pro vložení grafiky do stránky měli weboví vývojáři až donedávna v podstatě jen dvě možnosti – buď statický obrázek, nebo využít plugin (Flash, VML apod.) V poslední době doznal značného rozšíření ale vektorový formát SVG a bitmapový HTML5 canvas. Jaké jsou jejich vlastnosti a v čem se liší?

Flotr2 je javascriptová knihovna pro tvorbu grafů. Nabízí celou řadu možností (viz obrázek). K vykreslování grafů je použit canvas z HTML5. Zdrojové kódy najdete na GitHubu, vyzkoušet si ji rychle můžete na jsFiddle. Další informace najdete v dokumentaci. Více

Illuminated.js – je projekt pro renderování světelných scén do canvasu. Nabízí vám základní objekty, které rozmístíte v prostoru, a vypočte výsledný obrázek. Použití v praxi může vypadat třeba takhle: var light = new Lamp({    … Více

O HTML5 canvasu a jeho možnostech jsme toho publikovali už celou hromadu, jednu věc musíme ovšem canvasu vytknout, jeho interaktivní možnosti jsou velmi omezené a jejich programování nepohodlné. Dokud v canvasu vykreslujete neinteraktivní obrázky,… Více

Baví vás jednoduché „casual“ hry a hříčky? JavaScript v kombinaci s Canvasem (a někdy i WebGL) už je dostatečně mocným nástrojem, jak ukazuje stejnojmenný článek. Pokud vás vytváření her pro prohlížeče zajímá, tak stay tuned – na Zdrojáku se budeme tomuto tématu věnovat… Více

Hry napsané v Javascriptu, které používají canvas, se tu objevují poměrně často. Dnešní hra je tak trochu výjimka. Nejedná se o remake staré hry, ale o „originální“ starou hru, která běží v emulátoru PC, napsaném v JavaScriptu: Paratrooper. Více