Membuat Line dengan Canvas HTML5

27/02/2015    Rully Febrian    3294    Website

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 :

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

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

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 :

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

No data.