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. 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. 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ý).
<html>
<head>
<script type="application/javascript">
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);
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
Související články
Externí odkazy
- (anglicky) Specifikace WHATWG
- (anglicky) Drawing Graphics with Canvas Archivováno 27. 6. 2010 na Wayback Machine (příklady)