Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Pengenalan Spesial Tag Canvas HTML5

Canvas merupakan tag baru dari HTML5 yang menawarkan kita untuk membuat sebuah objek hidup. Ibaratnya kita disediakan canvas untuk menggambar, lalu kita gambar canvas tersebut dengan vector apapun yang kita mau. Jika kita terbiasa menggambar di Adobe Illustrator, kali ini kita menggambar vector di canvas HTML5 dengan bantuan JavaScript. Penasaran bagaimana penampakan canvas HTML5 ? Silahkan lihat canvas sederhana yang saya buat dibawah ini.

Perhatikan bola berwarna biru muda merupakan vector yang dibuat didalam canvas. Untuk pembuatannya silahkan lihat kode dibawah ini.

<canvas id="imam" width="300" height="100" style="margin:10px auto; border:none; border-radius:2em">
</canvas>
<script type="text/javascript">
var c=document.getElementById("imam");
var ctx=c.getContext("2d");
ctx.fillStyle="#fcf";
ctx.beginPath();
ctx.arc(70,18,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
</script>

Bagi yang ingin berkreasi didalam canvas HTML5, sebaiknya anda pahami dulu JavaScript karena canvas HTML5 berhubungan dengan JavaScript. Untuk contoh convas HTML5 yang lain, tunggu di artikel mendatang yah :)

25 Comments

  1. Intan SudibjoReply

    nah baru lagi, mesti paham js dulu wkwkwk :D

    • Nurul ImamReply

      Dipahami dulu JavaScriptnya :D

      • Intan SudibjoReply

        bentar buka ebook dulu haha :D

        • Nurul ImamReply

          Mana e-booknya, minta donk :D

  2. Anthonie EkaReply

    saya belum mengerti kegunaannya mas Nurul, makasih saya mau coba menyimak dan memahami lagi :)

    • Nurul ImamReply

      Silahkan simak sepuasnya :D

  3. IchaLReply

    js sy masih kalah mas.

    • Nurul ImamReply

      Kenapa kok bisa kalah ?

  4. Valentino FebrianReply

    Wahh saya nyerah deh kalo tentang ginian ..gak mudeng .. btw salam kenal sob

    • Nurul ImamReply

      Salam kenal juga sob :)

  5. Artikel HancurReply

    keren mas ..jadi lebih tahu tentang html ..thanks artikelnya

    • Nurul ImamReply

      Sama-sama kak :)

  6. Mizz AizaReply

    objek yang terhasil dalam bentuk 3D ke?

    • Nurul ImamReply

      Iya kak ;)

  7. NehandReply

    Wah mumet saya mas kalo sudah kena kode2 seperti ini.hehehe…salam kenal mas,salam persahabatan.

    • Nurul ImamReply

      Salam kenal juga mas :)

  8. Index ApkReply

    mampir pagi mas imam

    • Nurul ImamReply

      Saya bukanya siang-siang mas :D

  9. AgriReply

    Kalau di suruh “pahami js nya dulu” saya angkat tangan mas.. susah! hahaha =D

    • Nurul ImamReply

      Berarti pahami HTML dan CSSnya dulu deh :p

  10. RirinReply

    ternyata tag ada yang spesial juga ya mas. Saya kira hanya bakso saja yang ada embel-embel spesial nya hehe :D

    • Nurul ImamReply

      Tuh kan pikirannya sama bakso mulu klo cewe :p

  11. PondokgueReply

    buat Blogspot juga bisa, kakak? :o
    pengen nyoba nih.. :D

    • Nurul ImamReply

      Bisa aja kok, silahkan dicoba mas :D

  12. audio hajiReply

    ok gan, terus diikutin

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>