Membuat Setengah Lingkaran di Canvas HTML5

Pada artikel hari ini saya akan membahas tentang HTML5 Canvas Semicircle yang atinya membuat setengah lingkaran pada canvas HTML 5. Untuk dapat membuat Kanvas setengah lingkaran pada HTML 5, kita dapat menggunakan Method arc() dan mendefinisikan sudut akhir dan sudut awal.

Format penulisannya seperti ini.

x dan y adalah posisi pusat lingkaran, r adalah radius atau jari-jari lingkaran, startAngle adalah sudut awal pembuatan arc dalam satuan radian dan endAngle adalah sudut terakhir pembuatan arc, sedangkan anticlockwise bernilai true jika pembuatan arc searah jarum jam dan false berlawanan arah jarum jam.

Pertama kita akan buat elemen canvas sebagai berikut

Untuk dapat menggambar setengah lingkaran, kita dapat menggabungkan perintah beginPath() dan closePath(). Metode beginPath() untuk menyatakan bahwa kita akan menggambar. Kemudian buat tag script dan masukkan perintah berikut

Penjelasan :
Dengan fungsi closePath() agar membentuk poligon tertutup maka path harus ditutup.
lineWidth : nilai ketebalan garis.
strokeStyle : memberikan warna pada garis.


Sehingga hasilnya sebagai berikut.

Selamat Mencoba.

7 Maret 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat