Tuval Koordinatlar
HTML tuval iki boyutlu bir ızgara.
Tuvalin sol üst köşe koordinatları vardır (0,0)
: Bir önceki bölümde, kullanılan bu yöntem gördüm fillRect(0,0,150,75) .
Bu demektir: Sol üst köşede başlayın (0,0) ve 150x75 piksel dikdörtgen çizin.
Örnek koordinatları
Fare dikdörtgen üzerinde aşağıdaki x ve y koordinatları görmek için:
Bir çizgi çiz
Bir tuval üzerine düz bir çizgi çizmek için aşağıdaki yöntemleri kullanın:
- moveTo( x,y ) - çizginin başlangıç noktasını tanımlar
- lineTo( x,y ) - hattın bitiş noktasını tanımlar
Aslında çizgi çizmek için, birini kullanmak zorundadır "ink" gibi yöntemlerle, stroke() .
Örnek
Pozisyonda, bir başlangıç noktası tanımlama (0,0) ve bir konum bir bitiş noktası (200,100) . Ardından kullanmak stroke() aslında çizgi çizmek için yöntem:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); Kendin dene " Bir çember çiz
Bir tuval üzerinde bir daire çizmek için, aşağıdaki yöntemleri kullanın:
- beginPath() - bir yol başlar
- arc(x,y,r,startangle,endangle) - bir yay / eğrisi oluşturur. Bir çevre oluşturmak için arc() : Seti * Math.PI 0 ile 2 açısı ve son başlangıç açısı. x ve y parametreleri x- ve daire merkezinin y-koordinatlar. R parametresi dairenin yarıçapını tanımlamaktadır.
Örnek
Bir çevre tanımlama arc() yöntemi. Ardından kullanmak stroke() aslında daire çizmek için yöntem:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); Kendin dene "