HTML5 canvas

HTML5 canvas je HTML prvek zahrnutý ve specifikaci HTML5. Slouží k dynamickému skriptovatelnému vykreslování bitmap a grafických primitiv, podobně jako je to známo např. z vývojového prostředí VCL Delphi nebo programovacího jazyka C++.

Struktura

Prvek canvas sestává z regionu, na který lze kreslit, definovaného v HTML kódu šířkou a výškou. Po zadefinování k němu lze přistupovat pomocí JavaScriptu za použití mnoha kreslících funkcí podobných jiným běžným 2D API. +more To umožňuje dynamicky generovat grafiku. Případné využití je v oblasti vykreslování grafů, animací, her (i 3D) a úpravy obrázků.

Podpora prohlížečů

Původně byl představen společností Apple pro použití v operačním systému OS X pro WebKit komponenty, kterými jsou realizovány např. dashboard widgety (miniaplikace rozmístitelné na pracovní ploše, známé také z Windows Vista) nebo prohlížeč Safari. +more Později byl implementován do prohlížečů s jádrem Gecko (např. Mozilla Firefox), do prohlížeče Opera a také standardizován WHATWG pro nově navržené specifikace next-gen webových technologií.

Novell poskytuje XForms plugin pro Internet Explorer, který také poskytuje podporu pro Canvas. Je rovněž vyvíjeno nemalé nezávislé úsilí pro podporu canvas v IE, které nevyžaduje pluginy a funguje čistě na VML a JavaScriptu.

Příklad

Vykreslení dvou překrývajících se obdélníků (jeden částečně průhledný).

function draw { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); }

Související články

HTML5

Externí odkazy

[url=https://web. archive. +moreorg/web/20090427053125/http://www. whatwg. org/specs/web-apps/current-work/multipage/the-canvas-element. html#the-canvas-element]Specifikace WHATWG[/url] * [url=https://developer. mozilla. org/en/drawing_graphics_with_canvas]Drawing Graphics with Canvas[/url] (příklady).

canvas