Koordinat Kanvas HTML
Koordinat Kanvas
Kanvas HTML adalah kotak dua dimensi.
Sudut kiri atas kanvas memiliki koordinat (0,0)
Di bab sebelumnya, Anda melihat metode ini digunakan: fillRect(0,0,150,75).
Ini berarti: Mulai dari sudut kiri atas (0,0) dan gambar persegi panjang berukuran 150x75 piksel.
Contoh Koordinat
Arahkan mouse ke atas persegi panjang di bawah untuk melihat koordinat x dan y:
Menarik garis
Untuk menggambar garis lurus di atas kanvas, gunakan metode berikut:
- moveTo( x,y ) - mendefinisikan titik awal garis
- lineTo( x,y ) - mendefinisikan titik akhir dari garis
Untuk benar-benar menggambar garis, Anda harus menggunakan salah satu metode "tinta", seperti stroke().
Contoh
Tentukan titik awal di posisi (0,0), dan titik akhir di posisi (200.100). Kemudian gunakan metode stroke() untuk benar-benar menggambar garis:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Menggambar lingkaran
Untuk menggambar lingkaran di atas kanvas, gunakan metode berikut:
- beginPath() - memulai jalur
- arc(x,y,r,startangle,endangle) - membuat busur/kurva. Untuk membuat lingkaran dengan arc(): Atur sudut awal ke 0 dan sudut akhir ke 2*Math.PI. Parameter x dan y menentukan koordinat x dan y dari pusat lingkaran. Parameter r mendefinisikan jari-jari lingkaran.
Contoh
Tentukan lingkaran dengan metode arc(). Kemudian gunakan metode stroke() untuk benar-benar menggambar lingkaran:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();