Belajar HTML5 dan Canvas Membuat Animasi Lingkaran

Labkom99.Com – Belajar HTML5 dan Canvas Membuat Animasi Lingkaran. Elemen Canvas adalah bagian dari HTML5 dan memungkinkan bahasa scripting untuk secara dinamis membuat gambar animasi. Awalnya diluncurkan oleh Apple secara internal menggunakan Mac OS X WebKit sendiri dan aplikasi digunakan oleh widget seperti dasbor dan browser Safari.

Kemudian, disarankan oleh browser kernel Gecko (terutama Mozilla dan Firefox), Opera dan Chrome, dan Kelompok Kerja Teknologi Aplikasi Web Hypertext untuk menggunakan elemen ini untuk generasi berikutnya dari teknologi web.

Plug-in prosesor XForms yang diproduksi oleh Novell mendukung elemen Canvas sebagai plug-in Internet Explorer. Ada juga upaya untuk menggunakan VML dan JavaScript untuk mendukung fitur Canvas di Internet Explorer tanpa perlu plugin. Google juga telah memulai proyek untuk mendukung kemampuan Canvas di Internet Explorer menggunakan teknologi yang sama. Tetapi Internet Explorer telah mendukung elemen kanvas sejak Internet Explorer 9.

Apa Itu Canvas?

Canvas API (Canvas) adalah tag baru yang ditambahkan ke HTML5 untuk pembuatan gambar real-time di halaman web dan dapat memanipulasi konten gambar. Pada dasarnya ini adalah bitmap yang dapat dimanipulasi dengan JavaScript.

Canvas ditentukan oleh atribut yang ditentukan dalam kode HTML5 area yang dapat ditarik untuk menentukan tinggi dan lebar. Kode JavaScript dapat mengakses area melalui serangkaian fungsi menggambar yang mirip dengan API dua dimensi umum lainnya, memungkinkan grafik yang dihasilkan secara dinamis. Canvas juga memiliki beberapa kegunaan yang mungkin, termasuk menggunakan Canvas untuk membuat grafik, animasi, game, dan gambar.

Baca Juga : 12 Tools Andalan Untuk Membuat Efek Animasi Dengan HTML 5

Alat / Bahan Baku

Notepad

Perhatian

Untuk membuat animasi dengan canvas pada bagian ini sebaiknya memahami terlebih dahulu tentang Struktur dasar HTML dan cara membuat template, cara menyimpan dan cara membuka file HTML yang sudah di bahas pada pembahasan Bagaimana Cara Membuat Template HTML

Metode / Langkah Membuat Animasi Lingkaran

Kanvas dapat menggambar, dan secara alami dapat membuat animasi, karena setiap frame dari animasi adalah gambar. Kita dapat menggunakan fungsi setInterval javascript untuk mencapai efek animasi.

Contoh Penggunaan Canvas Membuat Animasi Lingkaran

Source Code

<canvas id=”myCanvas” width=”300″ height=”300″>
        labkom99.com – Animasi Canvas！
    </canvas>
    <script>
        var canvas = document.getElementById(‘myCanvas’);
            if (canvas.getContext) {
                 var context = canvas.getContext(‘2d’);
                var posX = 100,
                    posY = 150,
                    flag = true;
             
                setInterval(function() {
                 
                    context.fillStyle = “#4fa897”;
                    context.fillRect(0,0,canvas.width, canvas.height);
                    context.beginPath();
                    context.fillStyle = “#ed0a0a”;
                    context.arc(posX, posY, 20, 0, Math.PI*2, true);
                    context.closePath();
                    context.fill();

                    console.log(posX + “,” + posY);
                    if(flag && posX < 201) {
                        posX += 1;
                    } else {
                        posX -= 1;
                        flag = false;
                        if(posX < 100) {
                            flag = true;
                        }
                    }
                    if(flag) {
                        posY = 150-Math.sqrt(2500-Math.pow(posX-150, 2));
                    } else {
                        posY = 150+Math.sqrt(2500-Math.pow(posX-150, 2));
                    }

                    context.beginPath();
                    context.arc(150, 150, 2, 0, Math.PI*2, true)
                    context.fillStyle = “#f5ff00”;
                    context.fill();

                }, 50);
            }
    </script>

Hasil Dalam Browser

Baca Juga : 7 Framework Terbaik Untuk Pengembangan HTML5

Source Code

<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>Labkom99.com -canvas</title>
</head>
<body>
<canvas id="ldsun" width="500" height="200" ></canvas>
<div id="ds"></div>
<script type="text/javascript">
var canvas = document.getElementById('ldsun');
var p100=canvas.getContext("2d");
var width=400;
var height=200;
var start=0
var exp=1;
p100.strokeStyle = "rgba(255,0,0,1)";
function draw(){
p100.clearRect(0,0,width,height)
p100.fillStyle="blue";
p100.beginPath();
p100.arc(180,start,20,0,Math.PI*2,1);
p100.closePath();
p100.fill();
start=start+exp;
if(start==0 || start==height-1){
exp=exp*-1;
}
}
</script>
<input onclick="interval=setInterval(draw,5);" value="Mulai" type="button" />
<input onclick="clearInterval(interval);" value="Berhenti" type="button" />
</body>
</html>

Hasil Di Browser

Selamat Mencoba ………!!!!