Souřadnice HTML plátna
Souřadnice plátna
HTML plátno je dvourozměrná mřížka.
Levý horní roh plátna má souřadnice (0,0)
V předchozí kapitole jste viděli použitou metodu: fillRect(0,0,150,75).
To znamená: Začněte v levém horním rohu (0,0) a nakreslete obdélník 150x75 pixelů.
Příklad souřadnic
Umístěním myši na obdélník níže zobrazíte jeho souřadnice x a y:
X
Y
Nakresli čáru
Chcete-li na plátno nakreslit rovnou čáru, použijte následující metody:
- moveTo( x,y ) - definuje počáteční bod čáry
- lineTo( x,y ) - definuje koncový bod řádku
Chcete-li skutečně nakreslit čáru, musíte použít jednu z metod „inkoust“, jako je stroke().
Příklad
Definujte počáteční bod na pozici (0,0) a koncový bod na pozici (200,100). Poté pomocí metody stroke() skutečně nakreslete čáru:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Nakreslete kruh
Chcete-li nakreslit kruh na plátno, použijte následující metody:
- beginPath() - začíná cestu
- arc(x,y,r,startangle,endangle) - vytvoří oblouk/křivku. Chcete-li vytvořit kruh pomocí arc(): Nastavte počáteční úhel na 0 a koncový úhel na 2*Math.PI. Parametry x a y definují souřadnice x a y středu kružnice. Parametr r definuje poloměr kružnice.
Příklad
Definujte kružnici pomocí metody arc(). Poté pomocí metody stroke() skutečně nakreslete kruh:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();