Koordinat Canvas HTML

Perekomendasi kursus:

Koordinat kanvas

Kanvas HTML adalah grid dua dimensi.

Koordinat kiri atas kanvas adalah (0,0).

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

Contoh koordinat

Tempaikan kursor di persegi kecil di bawah ini untuk melihat koordinat x dan y:

X
Y

Gambar garis

Untuk menggambar garis lurus di atas kanvas, gunakan metode berikut:

  • moveTo(x,y) - Definikan titik awal jalur
  • lineTo(x,y) - Definikan titik akhir jalur

Untuk menggambar garis secara nyata, Anda harus menggunakan salah satu metode 'warna', seperti stroke().

Anda browser tidak menyokong tag HTML5 canvas.

实例

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

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

Coba Sendiri

Gambar bulatan

Untuk menggambar bulatan di atas kanvas, gunakan metode berikut:

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

Untuk menggunakan arc() untuk mencipta bulatan: atur sudut permulaan 0, atur sudut pengakhiran 2 * Math.PI. Parameter x dan y menentukan koordinat pusat x dan y lingkaran. Parameter r menentukan jari-jari lingkaran.

Anda browser tidak menyokong tag HTML5 canvas.

实例

使用 arc() 方法定义一个圆。然后使用 stroke() 方法来实际绘制圆：

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:

Panduan Lengkap Canvas CodeW3C.com