Membuat Line dengan Canvas HTML5

Tutorial berikut akan membahas cara membuat line dengan canvas HTML5. Sebelumnya kita telah mengetahui bahwa canvas digunakan untuk menggambar grafis 2d dengan javascript. Jika teman-teman sudah pernah belajar javascript maka cukup mudah untuk membuat sebuah line dengan canvas. Bagaimana caranya silakan ikuti tutorial ini.

Buatlah dokument HTML5 dengan elemen canvas seperti berikut :

Membuat-Line-dengan-Canvas-HTML5

Didalam canvas width dan height harus selalu diset. Kemudian buatlah script seperti dibawah ini.

Membuat-Line-dengan-Canvas-HTML5

Ini merupakan script dasar dalam membuat sebuah canvas. Selanjutnya kita akan membuat sebuah garis atau line. Tambahkan perintah berikut.

Membuat-Line-dengan-Canvas-HTML5

Context.moveTo(X,Y) mendefinisikan titik koordinat garis awal. sedangkan context.LineTo(X,Y) merupakan titik garis akhir. context.stroke adalah garis yang dibuat berdasarkan titik awal dan akhir. Cukup mudah bukan. Selanjunya simpan kode diatas dan jalankan pada browser.

Hasilnya :

Membuat-Line-dengan-Canvas-HTML5

Demikian membuat line dengan canvas dan sampai bertemu di tutorial berikutnya. Terimakasih dan Selamat Mencoba.

27 Februari 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