Wellness Wednesday
IT Corner hari Rabu ini kita materinya adalah tentang HTML canvas. Canvas ini digunakan untuk membuat grafik secara dinamik menggunakan JavaScript. Untuk membuat canvas, elemen yang digunakan yaitu elemen
Pertama, canvas yang telah dibuat tadi perlu diberi id supaya bisa ditarget dalam JavaScript. Selain itu, canvasnya juga memerlukan atribut width dan height. Dalam JavaScriptnya, kita target canvas tadi menggunakan document.getElementById() dan masukkannya ke dalam variabel, misalnya c. Setelah itu, kita mendapatkan context dengan metode getContext(). Karena kita akan menggunakan context 2d, masukkan “2d” sebagai contextnya dan seperti biasa, masukkan dalam variabel, misalnya ctx.
Untuk menggambar garis, pertama kita menggunakan metode beginPath() untuk mereset atau membuat path baru. Kemudian, menggunakan metode moveTo() pada ctx dan memasukkan koordinat awal. Seterusnya, menggunakan metode lineTo() pada ctx dan memasukkan koordinat titik selanjutnya. Setelah itu, menggunakan metode stroke() untuk menggambarnya.
Untuk menggambar lingkaran, pertama akan menggunakan metode beginPath() untuk mereset atau membuat path baru. Seterusnya, menggunakan metode arc() pada ctx. Syntaxnya adalah arc(x, y, r, sAngle, eAngle, counterclockwise), di mana x dan y adalah koordinat tengah lingkaran, r adalah jari-jari lingkaran, sAngle adalah sudut awal dalam radian, eAngle adalah sudut akhir dalam radian, dan counterclockwise adalah menspesifikasi apakah akan digambar mengikut arah jam atau tidak. Parameter counterclockwise sebenarnya opsional dan nilai defaultnya adalah false. Setelah itu, kita menggunakan metode stroke().
