Membuat Bentuk Bidang Datar Dengan HTML5
Hai sobat, untuk postingan kali ini, saya akan sedikit bagi-bagi uang ilmu tentang HTML5. Apaan itu? HTML5 itu perkembangan dari versi sebelumnya. Sebenarnya HTML ada berapa sih, kok muncul beberapa versi gitu. Okey pertanyaan yang bagus. biat tahu jelas bagaimana sejarah HTML. HTML itu HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web. Terus dikembangkan hingga HTML versi kelima atau lebih enaknya disebut HTML5.
Saya akan membuat kodingan sederhana untuk membuat bentuk-bentuk bangun datar sederhana dengan HTML5. Namun, bagi orang awam, koding di bawah ini pasti bikin puseng. hahahaha....
Tampilannya nanti akan seperti ini jika dimuat di browser..
Monggo disedot kalau pengen coba-coba.....
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>HTML5 Nyobak Aja</title>
<script type="text/javascript" charset="utf-8">
//
function pageLoaded(){
alert('Okey, Selamat Datang');
}
</script>
</head>
<body onload="pageLoaded();">
<canvas width="660" height="480" id="testcanvas" style="border:black 5px solid;">
</canvas>
<script type="text/javascript" charset="utf-8">
function pageLoaded(){
//Ngambil sentuhan canvas objek
var canvas = document.getElementById('testcanvas')
var context = canvas.getContext('2d');
//Tulis Code
context.fillStyle="green";
context.strokeRect(20,10,100,100)
context.fillRect(150,10,100,100)
context.strokeRect(280,10,100,100)
context.fillRect(410,10,100,100)
context.strokeRect(540,10,100,100)
//Bentuk Kompleks
// Segitiga
context.beginPath();
context.moveTo(20,120);
context.lineTo(20,180);
context.lineTo(110,150);
context.fill();
//Segitiga Pukulan
context.beginPath();
context.moveTo(140,160);
context.lineTo(190,220);
context.lineTo(40,190);
context.closePath();
context.stroke();
// Busur 1
context.beginPath();
context.arc(50,270,20,0,Math.PI,true);
context.stroke();
// Busur 2
context.beginPath();
context.arc(130,270,20,0,Math.PI,true);
context.stroke();
context.beginPath();
context.arc(130,270,40,0,Math.PI,true);
context.stroke();
// Busur 3
context.beginPath();
context.arc(270,270,20,0,Math.PI,true);
context.stroke();
context.beginPath();
context.arc(270,270,40,0,Math.PI,true);
context.stroke();
context.beginPath();
context.arc(270,270,70,0,Math.PI,true);
context.stroke();
// Kotak Merah
context.fillStyle="red";
context.fillRect(30,310,100,50);
//Kotak Transparan
context.strokeStyle="green"
context.strokeRect(30,390,100,50);
// Pokoknya kotak
context.fillStyle="rgb(255,0,0)";
context.fillRect(150,310,100,50);
context.fillStyle="rgba(0,255,0,0.5)";
context.fillRect(180,320,100,50);
}
</script>
</body>
</html>
Posted By
Saya akan membuat kodingan sederhana untuk membuat bentuk-bentuk bangun datar sederhana dengan HTML5. Namun, bagi orang awam, koding di bawah ini pasti bikin puseng. hahahaha....
Tampilannya nanti akan seperti ini jika dimuat di browser..
Monggo disedot kalau pengen coba-coba.....
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>HTML5 Nyobak Aja</title>
<script type="text/javascript" charset="utf-8">
//
function pageLoaded(){
alert('Okey, Selamat Datang');
}
</script>
</head>
<body onload="pageLoaded();">
<canvas width="660" height="480" id="testcanvas" style="border:black 5px solid;">
</canvas>
<script type="text/javascript" charset="utf-8">
function pageLoaded(){
//Ngambil sentuhan canvas objek
var canvas = document.getElementById('testcanvas')
var context = canvas.getContext('2d');
//Tulis Code
context.fillStyle="green";
context.strokeRect(20,10,100,100)
context.fillRect(150,10,100,100)
context.strokeRect(280,10,100,100)
context.fillRect(410,10,100,100)
context.strokeRect(540,10,100,100)
//Bentuk Kompleks
// Segitiga
context.beginPath();
context.moveTo(20,120);
context.lineTo(20,180);
context.lineTo(110,150);
context.fill();
//Segitiga Pukulan
context.beginPath();
context.moveTo(140,160);
context.lineTo(190,220);
context.lineTo(40,190);
context.closePath();
context.stroke();
// Busur 1
context.beginPath();
context.arc(50,270,20,0,Math.PI,true);
context.stroke();
// Busur 2
context.beginPath();
context.arc(130,270,20,0,Math.PI,true);
context.stroke();
context.beginPath();
context.arc(130,270,40,0,Math.PI,true);
context.stroke();
// Busur 3
context.beginPath();
context.arc(270,270,20,0,Math.PI,true);
context.stroke();
context.beginPath();
context.arc(270,270,40,0,Math.PI,true);
context.stroke();
context.beginPath();
context.arc(270,270,70,0,Math.PI,true);
context.stroke();
// Kotak Merah
context.fillStyle="red";
context.fillRect(30,310,100,50);
//Kotak Transparan
context.strokeStyle="green"
context.strokeRect(30,390,100,50);
// Pokoknya kotak
context.fillStyle="rgb(255,0,0)";
context.fillRect(150,310,100,50);
context.fillStyle="rgba(0,255,0,0.5)";
context.fillRect(180,320,100,50);
}
</script>
</body>
</html>
Posted By
Post a Comment for "Membuat Bentuk Bidang Datar Dengan HTML5 "
Terima kasih telah mampir di blog kami. Jika ingin menghubungi penulis, silakan kirim pesan via email di kitainformatika@gmail.com atau via WA di 087750503014. Jika mood penulis lagi baik, biasanya fast respon.