HTML kresba na plátně
Kreslit na plátno pomocí JavaScriptu
Veškeré kreslení na plátně HTML musí být provedeno pomocí JavaScriptu:
Příklad
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Krok 1: Najděte prvek plátna
Nejprve musíte najít prvek <canvas>.
To se provádí pomocí metody HTML DOM getElementById():
var canvas = document.getElementById("myCanvas");
Krok 2: Vytvořte objekt kreslení
Za druhé, potřebujete kreslicí objekt pro plátno.
GetContext() je vestavěný objekt HTML s vlastnostmi a metodami pro kreslení:
var ctx = canvas.getContext("2d");
Krok 3: Kreslení na plátno
Nakonec můžete kreslit na plátno.
Nastavte styl výplně nakresleného objektu na červenou barvu:
ctx.fillStyle = "#FF0000";
Vlastností fillStyle může být barva CSS, přechod nebo vzor. Výchozí fillStyle je černá.
Metoda fillRect( x,y,width,height ) nakreslí na plátno obdélník vyplněný stylem výplně:
ctx.fillRect(0, 0, 150, 75);