Menggambar Garis melalui Canvas pada JavaScript
Mari kita mulai dengan yang sederhana - menggambar garis. Untuk memahami cara melakukannya, bayangkan Anda memiliki selembar kertas dan pensil. Anda dapat menggambar di kertas ini, atau hanya memindahkan pensil ke titik yang diinginkan tanpa menggambar.
JavaScript bekerja dengan cara yang sama: ia memiliki
pensil (atau pena untuk menggambar), ke lokasi yang
diinginkan Anda dapat memindahkannya menggunakan
method moveTo, dan menggambar - menggunakan
method lineTo.
Kedua method menerima parameter berupa titik ke
mana ujung pena akan digeser - parameter pertama
adalah koordinat horizontal, dan yang kedua - vertikal.
Titik asal koordinat - titik 0,
0 - adalah sudut kiri atas elemen.
Ketika pena dipindahkan ke titik yang diinginkan -
method moveTo hanya memindahkan, sedangkan
lineTo dalam proses perpindahan menggambar
garis dari posisi pena saat ini ke titik
tujuannya.
Namun, jika kode di atas dijalankan
- tidak ada yang akan terjadi: perlu menulis
dua perintah lagi: perintah pertama beginPath
harus ditulis sebelum mulai menggambar
garis, dan perintah kedua stroke harus
dipanggil setelah semua kombinasi moveTo
dan lineTo agar garis tergambar.
Jadi, mari tulis kode yang berfungsi untuk menggambar garis:
Mari menggambar garis
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Mari menggambar burung
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
Mari menggambar segitiga
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
Mari menggambar kotak
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
Penutupan bentuk
Untuk menggambar bentuk tertutup, tidak harus
membuat semua garis - garis terakhir dapat
digambar secara otomatis dan menutup bentuk.
Untuk ini, sebelum method stroke,
panggil method closePath.
Method ini mencoba menutup bentuk dengan menggambar garis lurus dari titik akhir ke titik awal. Jika bentuk sudah tertutup atau hanya berupa titik, maka method tidak melakukan apa-apa.
Mari gambar segitiga menggunakan closePath:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - langkah ini kita lewati
ctx.closePath();
ctx.stroke();
:
Mengisi bentuk
Alih-alih method stroke, Anda dapat menggunakan
method fill - dengan ini bentuk tidak harus
benar-benar tertutup - bentuk akan terisi
warna begitu saja:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - langkah ini kita lewati
//ctx.closePath(); - dan ini juga
ctx.fill();
:
