Blog

HTML5 Canvas - Membuat Garis Menggunakan Canvas HTML 5

 

HTML5 Canvas - Membuat Garis Menggunakan Canvas HTML 5

HTML 5     1 tahun yang lalu


Untuk menggambar garis menggunakan Canvas pada HTML5, kita bisa menggunakan metode beginPath(), moveTo(), lineTo(), dan stroke().

Pertama, kita bisa menggunakan metode beginPath() untuk menyatakan bahwa kita akan menggambar jalur baru. Selanjutnya, kita dapat menggunakan metode moveTo() untuk memposisikan titik konteks (yaitu menggambar kursor), dan kemudian menggunakan metode lineTo() untuk menggambar garis lurus dari posisi awal ke posisi baru.

Akhirnya, untuk membuat garis terlihat, kita dapat menerapkan stroke dengan menggunakan stroke(). Warna stroke secara default adalah hitam.

Berikut contoh membuat garis menggunakan Canvas pada HTML 5:

<style>
  body {
    margin: 0px;
    padding: 0px;
  }
</style>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  context.beginPath();
  context.moveTo(100, 150);
  context.lineTo(450, 50);
  context.stroke();
</script>

 


Kami membuat aplikasi pelayanan kependudukan dan administrasi untuk Desa dan Kelurahan. Demo bisa diakses di https://dash.klandesa.com. Silahkan gunakan email: demo@klandesa.com dan password: 123456


CARI ARTIKEL
Card image cap
AUTHOR: Wisnu

"Client-facing" person. His goal - help clients/projects succeed and always coding.


Lihat Project Kami | Bertemu Tim Kami

Tertarik berkerja dengan kami? Email disini:
wisnu@tipa.co.id