Płótno Współrzędne
Płótno HTML jest siatką dwuwymiarową.
Górnym lewym rogu płótna ma współrzędne (0,0)
W poprzednim rozdziale, widziałeś tę metodę: fillRect(0,0,150,75) .
Oznacza to: Start w lewym górnym rogu (0,0) i narysuj prostokąt 150x75 pikseli.
współrzędne Przykład
Najedź prostokąta poniżej, aby zobaczyć jego współrzędne x i y:
Narysuj linię
Aby narysować linię prostą na płótnie, użyj jednej z następujących metod:
- moveTo( x,y ) - definiuje punkt początkowy linii
- lineTo( x,y ) - określa się punkt końcowy linii
Aby właściwie narysować linię, należy skorzystać z jednej z "ink" metod, takich jak stroke() .
Przykład
Określ punkt wyjścia w pozycji (0,0) i punkt końcowy w pozycji (200,100) . Następnie użyj stroke() Metoda faktycznie narysować linię:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); Spróbuj sam " Narysować okrąg
Aby narysować okrąg na płótnie, użyj jednej z następujących metod:
- beginPath() - rozpoczyna ścieżkę
- arc(x,y,r,startangle,endangle) - tworzy kąt / krzywą. Aby utworzyć okrąg z arc() : Ustaw kąt początkowy na 0 i kąt końcowy do 2 * Math.PI. X i Y określają parametry X i Y współrzędne środka okręgu. Parametr R określa promień okręgu.
Przykład
Zdefiniuj okrąg z arc() metody. Następnie użyj stroke() Metoda faktycznie narysować okrąg:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); Spróbuj sam "