Membuat Lingkaran dengan Canvas di HTML5
Membuat Lingkaran dengan Canvas di HTML5 ~ Pada Tutorial kali ini saya akan mendemokan salah satu kelebihan dari HTML5 yaitu kemampuan untuk membuat vektor dan canvas menggunakan HTML5 tersebut. dan hal tersebut akan saya demokan dengan membuat sebuah lingkaran menggunakan fitur svg pada Html5.
berikut Struktur HTML untuk membuat Lingkarang dengan menggunakan HTML5
<!DOCTYPE
HTML>
<html>
<head>
<style>
#myCanvas
{
border:
1px solid #9C9898;
}
</style>
<script>
window.onload
= function() {
var canvas =
document.getElementById("myCanvas");
var context =
canvas.getContext("2d");
var centerX =
canvas.width / 2;
var centerY =
canvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(centerX,
centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle =
"#8ED6FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle =
"black";
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas"
width="578" height="200"></canvas>
</body>
</html>
Setelah Itu, buka File tersebut dengan menggunakan Web Browser yang Mendukung Teknologi HTML5, sehingga akan muncul seperti gambar dibawah ini :
Semoga artikel Membuat Lingkaran dengan Canvas di HTML5 bermanfaat bagi Anda. Jika kamu suka dengan artikel Membuat Lingkaran dengan Canvas di HTML5 ini, like dan bagikan ketemanmu.
gan gimana cara membuat lingkaran yang berbentuk seperti diagram lingkaran ? jadi misal dalam satu lingkaran tersebut terdapat 30 persen warna hitam sisanya hijau begitu kira-kira, terima kasih sebelumnya
Post a Comment