Blog

HTML5 Canvas - Membuat Garis Menggunakan Canvas HTML 5

 

HTML5 Canvas - Membuat Garis Menggunakan Canvas HTML 5

HTML 5     2 bulan 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>