Melukis Garisan melalui canvas pada JavaScript
Mari mulakan dengan yang mudah - melukis garisan. Untuk memahaminya, bayangkan anda mempunyai sehelai kertas dan pensel. Anda boleh melukis di atas kertas itu, atau hanya menggerakkan pensel ke titik yang dikehendaki tanpa melukis.
JavaScript juga berfungsi dengan cara yang sama: ia mempunyai
pensel (atau pen untuk melukis), anda boleh menggerakkannya ke lokasi
yang dikehendaki menggunakan kaedah
moveTo, dan melukis - menggunakan kaedah
lineTo.
Kedua-dua kaedah menerima titik sebagai parameter untuk
menggerakkan hujung pen - parameter pertama ialah koordinat mendatar,
dan yang kedua - menegak. Asalan koordinat ialah titik 0,
0 - ini adalah sudut kiri atas elemen.
Apabila pen digerakkan ke titik yang dikehendaki -
kaedah moveTo hanya menggerakkan, manakala
lineTo semasa menggerakkan melukis
garisan dari kedudukan pen semasa ke titik
ia akan bergerak.
Walau bagaimanapun, jika kod di atas dijalankan
- tiada apa yang akan berlaku: perlu menulis
dua lagi arahan: arahan pertama beginPath
perlu dinyatakan sebelum mula melukis
garisan, dan arahan kedua stroke perlu
dipanggil selepas semua kombinasi moveTo
dan lineTo untuk garisan dilukis.
Jadi, mari tulis kod yang berfungsi untuk melukis garisan:
Mari lukis garisan
<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 lukis bentuk 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 lukis segi tiga
<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 lukis segi empat
<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();
:
Menutup bentuk
Untuk melukis bentuk tertutup, tidak semestinya
membuat semua garisan - garisan terakhir boleh
dilukis secara automatik dan menutup bentuk.
Untuk ini, sebelum kaedah stroke,
kaedah closePath harus dipanggil.
Kaedah ini cuba menutup bentuk dengan melukis garisan lurus dari titik akhir ke titik awal. Jika bentuk sudah ditutup atau merupakan hanya titik, maka kaedah tidak melakukan apa-apa.
Mari lukis segi tiga 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 tinggalkan
ctx.closePath();
ctx.stroke();
:
Mengisi bentuk
Selain kaedah stroke, kaedah
fill boleh digunakan - dalam kes ini bentuk tidak semestinya
perlu ditutup sepenuhnya - ia akan diisi
walaupun begitu:
<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 tinggalkan
//ctx.closePath(); - dan ini juga
ctx.fill();
:
