Bentuk Canvas HTML

contoh

Contoh 1

const kanvas = document.getElementById("myCanvas");
const ctx = kanvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

ctx.stroke();

Penggambar Garis Kanvas

garis yang digambar menggunakan jalur kanvas:

metode

beginPath() metode untuk memulai jalur baru. Dia tidak menggambar apa pun, hanya mendefinisikan jalur baru.

moveTo() menentukan titik awal garis. Dia tidak menggambar apa pun, hanya menentukan titik awal.

lineTo() Metode ini menentukan titik akhir garis. Dia tidak menggambar apa pun, hanya menentukan titik akhir.

stroke() Metode ini menggambar garis. Warna garis baku adalah hitam.

Beberapa contoh lainnya

Contoh 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

ctx.stroke();

Contoh 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

ctx.stroke();

Pemberitahuan

jika Anda ingin menggambar persegi, Anda tidak perlu menggambar 4 garis.

di bab selanjutnya, Anda akan belajar untuk menggunakan drawRect() metode untuk menggambar persegi

Properti strokeStyle

strokeStyle properti yang didefiniskan untuk gaya yang digunakan untuk menggambar di kanvas.

harus dipanggil stroke() atur terlebih dahulu sebelum memanggil

contoh

ctx.beginPath();
// mengdefiniskan persegi
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// mengdefiniskan segitiga
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "merah";
ctx.stroke();

ctx.stroke();

Coba Sendiri

Lihat Juga: