10:29
Unknown
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 HTML5bermanfaat bagi Anda. Jika kamu suka dengan artikel Membuat Lingkaran dengan Canvas di HTML5 ini, like dan bagikan ketemanmu.
0 comments:
Posting Komentar