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
Jika ingin membahas artikel ini bersama saya dan pengunjung lain silahkan isi kotak komentar yang berada di bawah artikel ini ^_^
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.