Pada Kesempatan kali ini kita akan belajar mengetahui tips dan trik membuat garis dalam canvas di HTML, oke langsung saja setelah kita kemarin kita belajar mengetahui apa itu canvas di HTML5 sekarang kita akan belajar membuat sesuatu garis di dalamnnya ya teman-teman, kali ini kita akan belajar membuat garis di dalam canvas, seperti halnya kita membuat garis di sebuah aplikasi paint, tapi kali ini kita buatnya di HTML. oke teman-teman simak terus ya.
Untuk mulai tips dan trik membuat garis dalam canvas di HTML, tambahan 3 baris kode berikut ini setelah kode JavaScript sebelumnya:
context.moveTo(10,10); context.lineTo(400,200); context.stroke();
Kode diatas dapat diterjemahkan dengan “buat garis mulai dari titik koordinat 10,10 sampai 400,200”. Karena kita menggunakan ukuran canvas 500 pixel x 300 pixel, maka seharusnya akan terlihat sebuah garis dari sudut kiri atas ke sudut kiri bawah.
Kode program context.moveTo() digunakan untuk menandai koordinat awal garis. Perintah context.lineTo() digunakan untuk menandai koordinat akhir baris, dan perintah context.stroke() berguna untuk ‘menulis’ garis tersebut.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tips dan trik membuat garis dalam canvas di HTML</title>
<style>
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="kertas_gambar" width="500" height="300"></canvas>
<script>
var canvasku = document.getElementById("kertas_gambar");
var context = canvasku.getContext("2d");
context.moveTo(10,10);
context.lineTo(400,200);
context.stroke();
</script>
</body>
</html>
Dari kode di atas akan di dapatkan sebuah garis seperti gamabar di atas, dan Selamat! Anda telah menguasai cara menggunakan canvas HTML5. Walaupun yang baru dihasilkan hanyalah sebuah garis sederhana. Oleh karena itu, mari kita tambahkan beberapa kode lagi untuk membuat garis tadi menjadi ‘mahakarya’ dengan mengubah tebal dan warnanya. Sebenarnya dari contoh pembuatan di atas kita bisa membuat lebih dari garis, bilangan ruang bisa, sekreatifnya teman-teman aja ya, saya rasa cukup sampai disini dulu ya teman-teman belajar kita tentang tips dan trik membuat garis dalam canvas di HTML, nanti kita bisa teruskan di artikel saya selanjutnya, semoga bermanfaat dan sampai jumpa di artikel saya selanjutnya terimakasih.
The post Tips dan Trik Membuat Garis Dalam Canvas di HTML appeared first on Kursus Website Terbaik.