Menggambar garis lurus dengan canvas di HTML5

Berikut skrip Javascript untuk menggambar garis lurus di canvas yang disediakan oleh HTML5.


context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.lineWidth = 1;
context.strokeStyle='';
context.stroke();

Penjelasan

Baris pertama: Memulai Penggambaran

Baris kedua: Membuat titik awal penggambaran di kordinat x1,y1.

Baris ketiga: Menggambar garis dari titik awal ke kordinat x2,y2.

Baris keempat: Menentukan luas garis.

Baris kelima: Memilih warna pada garis agar bisa terlihat, karena tidak diberi kode gambar, otomatis menggunakan warna hitam.

Baris terakhir: Memasang warna pada garis.



Keseluruhan kode


<html>

<head>

<title>Membuat garis lurus dengan HTML5</title>

</head>

<script language="javascript">


window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");


context.beginPath();

context.moveTo(100, 150);

context.lineTo(450, 50);

context.lineWidth = 15;

context.strokeStyle='';

context.stroke();

};


</script>

<body>

<canvas id="myCanvas" width="578" height="200"></canvas>

</body>

</html>






Jika ingin membahas artikel ini bersama saya dan pengunjung lain silahkan isi kotak komentar yang berada di bawah artikel ini ^_^

Tidak ada komentar:

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.

Diberdayakan oleh Blogger.