广州市文明办开展“爱护环境”主题月实践活动
HTML5 canvas je HTML prvek zahrnuty ve specifikaci HTML5. Slou?í k dynamickému skriptovatelnému vykreslování bitmap a grafickych primitiv, podobně jako je to známo nap?. z vyvojového prost?edí VCL Delphi nebo programovacího jazyka C++.
Struktura
[editovat | editovat zdroj]Prvek canvas sestává z regionu, na ktery lze kreslit, definovaného v HTML kódu ?í?kou a vy?kou. Po zadefinování k němu lze p?istupovat pomocí JavaScriptu za pou?ití mnoha kreslících funkcí podobnych jinym bě?nym 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??
[editovat | editovat zdroj]P?vodně byl p?edstaven spole?ností Apple pro pou?ití v opera?ním systému OS X pro WebKit komponenty, kterymi 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 webovych technologií.
Novell poskytuje XForms plugin pro Internet Explorer, ktery 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
[editovat | editovat zdroj]Vykreslení dvou p?ekryvajících se obdélník? (jeden ?áste?ně pr?hledny).
<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
[editovat | editovat zdroj]Externí odkazy
[editovat | editovat zdroj]- (anglicky) Specifikace WHATWG
- (anglicky) Drawing Graphics with Canvas Archivováno 27. 6. 2010 na Wayback Machine. (p?íklady)