Koordinat Canvas HTML

Koordinat kanvas

Kanvas HTML adalah grid dua dimensi.

Koordinat kiri atas kanvas adalah (0,0).

Di bab sebelumnya, kami menggunakan metode: fillRect(0,0,150,75).

Artinya: mulai menggambar persegi panjang 150x75 pixel dari kiri atas (0,0).

Contoh koordinat

Tunda kursor di sebelah bawah kotak untuk melihat koordinat x dan y nya:

Gambar garis

Untuk menggambar garis di atas kanvas, gunakan metode berikut:

• moveTo(x,y) - Definisi titik awal garis
• lineTo(x,y) - Definisi titik akhir garis

Untuk menggambar garis sebenarnya, Anda harus menggunakan salah satu metode 'pengecatan', seperti stroke().

Contoh

Definisikan titik awal di (0,0) dan titik akhir di (200,100). kemudian gunakan metode stroke() untuk menggambar garis sebenarnya:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

Coba Sendiri

Gambar lingkaran

Untuk menggambar lingkaran di atas kanvas, gunakan metode berikut:

• beginPath() - Mulai jalur
• arc(x,y,r,startangle,endangle) - Membuat lingkaran/curva

Untuk membuat lingkaran menggunakan arc(): atur sudut awal menjadi 0, atur sudut akhir menjadi 2 * Math.PI. Parameter x dan y menentukan koordinat pusat lingkaran. Parameter r menentukan jari-jari lingkaran.

Contoh

Menggunakan metode arc() untuk mendefinisikan lingkaran. kemudian gunakan metode stroke() untuk menggambar lingkaran sebenarnya:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Coba Sendiri

Lihat Juga:

Referensi Lengkap Canvas di CodeW3C.com