Canvas biasanya kita melukis atau menggabar menggunakan sebuah frame atau di atas sebuah kertas dengan tinta basah untuk sebuah seni, nah pada fitur baru HTML yaitu pada HTML5 terdapat sintag <canvas> yang dimana kita akan membuat sebauh pola baik itu bintang lingkaran segitiga dan masih banyak lagi, pada kesemapatan ini saya akan jelaskan tentang Cara Membuat Lingkaran Pada Canvas Menggunakan HTML5,
caranya memang agak rumit sih tapi kita akan buat mudah hal yang perlu diketahui jika kita menggunakan sebuah canvas pasti kita tidak lepas dari yang namanya koordinat yah jadi yah harus sabar eheheh, sekarang kita akan memulai mengetikan sebuah kodenya, teman teman bisa ikuti langkah berikut yah, pertama tama teman teman bisa siapkan sebuah file bernama lingkaran.html lalu masukkan scriptnya dibawah sini .
<body>
<h3> Belajar Membuat Lingkaran Menggunakan <br> Canvas Pada HTML5 </h3>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
Jika sudah coba save dan jalankankan maka jika benar hasilnya akan seperti ini :
Cukup mudah bukan? sekian tutorial tentang Cara Membuat Lingkaran Pada Canvas Menggunakan HTML5, sampai bertemu diartikel selanjutnya dan sampai jumpa.
#KeepLearn
#IsmetMA