Membuat Bentuk Bidang Datar Dengan HTML5

Table of Contents
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


Post a Comment