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

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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();

Результат:

Masalah praktikal