Canvas HTML5: Contoh sedarhana cara membuat garis di HTML5

Berikut ini adalah contoh cara membuat garis pada canvas di HTML5. Yang diperlukan untuk menggambar garis di canvas adalah beginPath (), MoveTo (), LineTo (), dan stroke () yang diimplementasikan dengan bantuan javascript.

Pada tag <script> kita menuliskan javascript untuk menggambar garis pada canvas, kita membutuhkan metode beginPath () untuk menyatakan bahwa kita akan menggambar, kemudian menggunakan metode MoveTo (x,y) untuk menentukan posisi titik awal garis dibentuk, dan kemudian menggunakan metode LineTo (x,y) untuk menentukan posisi akhir dari sebuah garis. Kemudian agar garis yang dibuat bisa terlihat, membutuhkan satu metode lagi yaitu stroke ().

Sebagai contoh saya akan menunjukkan scrpit di bawah ini:

Show/Hide Editor

Untuk bisa menebalkan garis menggunakan properti lineWidth dan untuk mewarnai garis menggunakan properti strokeStyle, sebagai hasilnya kita lihat di bawah ini:

Show/Hide Editor

Apabila hendak memberi style pada ujung garis maka menggunakan properti lineCap dengan style : butt, square dan round, seperti contoh berikut (butt berwarna merah, square berwarna hijau, dan round berwarna biru)

Show/Hide Editor

<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>
    <canvas id="contoh1" style="width:100%;height:100%;"></canvas>
    <script>
      var garis = document.getElementById('contoh1').getContext('2d');

// lineCap=butt untuk garis lurus

garis.beginPath();
      garis.moveTo(10, 10);
      garis.lineTo(80, 80);
      garis.lineCap='butt';
      garis.lineWidth=10;
      garis.strokeStyle='#ff0000';
      garis.stroke();

// lineCap=square untuk garis lurus

garis.beginPath();
      garis.moveTo(10, 40);
      garis.lineTo(80, 110);
      garis.lineCap='butt';
      garis.lineWidth=10;
      garis.strokeStyle='#00ff00';
      garis.stroke();

// lineCap=round untuk garis lurus

garis.beginPath();
      garis.moveTo(10, 70);
      garis.lineTo(80, 140);
      garis.lineCap='butt';
      garis.lineWidth=10;
      garis.strokeStyle='#0000ff';
      garis.stroke();

// lineCap=butt untuk segitiga

garis.beginPath();
      garis.moveTo(100, 10);
      garis.lineTo(100, 100);
      garis.lineTo(150, 50);
      garis.lineTo(100, 10);
      garis.lineCap='butt';
      garis.lineWidth=10;
      garis.strokeStyle='#ff0000';
      garis.stroke();

// lineCap=square untuk segitiga

garis.beginPath();
      garis.moveTo(170, 10);
      garis.lineTo(170, 100);
      garis.lineTo(220, 50);
      garis.lineTo(170, 10);
      garis.lineCap='square';
      garis.lineWidth=10;
      garis.strokeStyle='#00ff00';
      garis.stroke();

// lineCap=round untuk segitiga

garis.beginPath();
      garis.moveTo(240, 10);
      garis.lineTo(240, 100);
      garis.lineTo(290, 50);
      garis.lineTo(240, 10);
      garis.lineCap='round';
      garis.lineWidth=10;
      garis.strokeStyle='#0000ff';
      garis.stroke();
    </script>
  </body>
</html>

Itulah contoh sederhana bagaimana membuat garis pada canvas HTML5. selamat mencoba

Canvas HTML5

Laman

Senin, 14 April 2014

Contoh sedarhana cara membuat garis di HTML5

Tidak ada komentar:

Posting Komentar