Membuat Bentuk Bidang Datar Dengan HTML5

Abd Fauzan

Updated: 31 May, 2019 • 0 • min read

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

Kita Informatika

Membuat Bentuk Bidang Datar Dengan HTML5

Post a Comment