Agen Terpercaya   Advertise
 
 
 
Pasang iklan, hanya lewat Contact Us.
Waspada penipuan iklan. Klik di sini untuk melihat daftar penipu.

SHARE TUTOR JS -> WEB API DAN NODEJS CARINYA DISINI

RayMantic

Moderator
Staff member
Moderator
Daftar
4 Oct 1988
Post
×
Like diterima
9.183
Bimabet
Mengenal HTML5 Canvas untuk Pemrograman Grafis

Sebelum kedatangan HTML5, Game dan elemen multimedia lainnya disajikan dalam browser menggunakan Flash.

Banyak game berbasis Flash yang bisa dimainkan melalui browser. Bahkan Flash juga digunakan untuk memutar video.

Seingat saya dulu…tanpa Flash Player, kita tidak bisa memutar video di Youtube.

Namun semuanya berubah setelah kedatangan HTML5…

flash-html.jpg


HTML5 membawa banyak elemen baru yang menggantikan tugas Flash dalam browser. Salah satunya adalah canvas.

Apa itu Canvas?
Dalam dunia nyata, canvas sering digunakan untuk menggambar dan melukis. Biasanya menggunakan pensil dan cat.

Dalam pemrograman, canvas adalah elemen yang bisa digambar dengan kode.

Canvas adalah elemen baru di HTML5 untuk menggambar (render) grafik, image, dan teks.
Cara Membuat Canvas di HTML
Canvas dapat dibuat dengan tag <canvas>, jangan lupa juga untuk memberikan ukuran tinggi dan lebarnya.

Code:
<canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;">
</canvas>

Kita berikan sedikit style style="border:1px solid #000000;" untuk membuat garis tepi.

Selanjutnya kita harus menggunakan DOM API untuk memanipulasi canvas, biasanya dilakukan seperti ini:

Code:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Code:
Fungsi document.getElementById("myCanvas") untuk memilih elemen HTML dengan id myCanvas.

Selanjutnya variabel ctx (konteks) adalah objek dari canvas yang bisa kita manfaatkan untuk menggambar.

Contoh kode lengkapnya:

Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charsetgoyang dombret="utf-8">
        <title>Tutorial HTML 5 Canvas</title>
    </head>
    <body>

        <canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;">
        </canvas>

        <script type="text/javascript">
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
        </script>

    </body>
</html>

Sekarang kita punya canvas kosong yang siap untuk digambar…
html5-canvas-awal.png

Siapkan imajinasimu dan mulailah menggamabar dengan kode .

Menggambar di Canvas
Jika pada dunia nyata kita menggunakan pensil untuk menggambar, maka di canvas HTML5 menggunakan objek ctx.

Objek ctx bisa kita anggap sebagai pensil. Objek ini memiliki beberapa method untuk menggambar di canvas seperti fillRect(), arc(), fillText(), dsb.

Nah untuk menggambar dengan method-method tersebut, kita harus menentukan koordinat titik x dan y-nya.

Karena canvas terdiri dari kumpulan piksel yang membentuk diagram kartesius terbalik.

diagram-kartesius-canvas.png

Cara Menggambar Titik pada Canvas
Pertama kita akan coba menggambar sebuah titik.

Dalam seni rupa, titik adalah bagian terkecil dari sebuah objek yang menempati suatu ruang. Sedangkan dalam ilmu matematika geometri, titik adalah objek 0-dimensi yang tidak memiliki panjang, lebar, dan tinggi. 3

Tapi dalam komputer titik adalah ukuran 1 piksel dari layar.

Untuk menggambar titik pada canvas, kita dapat menggunakan method fillRect() dengan ukuran 1x1 piksel.

Code:
ctx.fillRect(x,y,1,1);

Variabel x dan y kita ganti dengan nilai koordinatnya, misalkan kita ingin menggambar titik pada koordinat (10,10).
Code:
ctx.fillRect(10,10,1,1);

Mari kita coba dalam kode:


Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tutorial HTML 5 Canvas</title>
    </head>
    <body>

        <canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;">
        </canvas>

        <script type="text/javascript">
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");

            // gambar titik pada koordinat (10,10) dengan ukuran 1x1 px
            ctx.fillRect(10,10,1,1);
        </script>

    </body>
</html>
gambar-titik-pada-canvas.png

(Lakukan pembesaran sampai 500% untuk melihatnya)

Cara Menggambar Garis pada Canvas
Garis adalah kumpulan dari titik-titik yang saling terhubung. Ada empat fungsi yang kita butuhkan untuk membuat garis.

  1. ctx.beginPath() untuk membuat garis baru.
  2. ctx.moveTo(x,y) untuk menentukan titik awal.
  3. ctx.lineTo(x,y) untuk menentukan titik akhir.
  4. ctx.stroke() untuk menggambar garisnya.
Mari kita coba…

Misalkan kita ingin menggambar garis dari titik (10,10) sampai titik (50,50).

Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tutorial HTML 5 Canvas</title>
    </head>
    <body>

        <canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;">
        </canvas>

        <script type="text/javascript">
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");

            ctx.beginPath(); // mulai menggmabar
            ctx.moveTo(10,10);
            ctx.lineTo(50,50);
            ctx.stroke();
        </script>

    </body>
</html>
hasil-gambar-garis-di-canvas.png

Cara Menggambar Persegi pada Canvas
Ada tiga fungsi yang digunakan untuk menggambar persegi pada canvas:

  1. ctx.strokeRect(x,y,w,h) persegi dengan garis (outline) saja.
  2. ctx.fillRect(x,y,w,h) persegi dengan polesan warna (default-nya hitam).
  3. ctx.clearRect(x,y,w,h) persegi transparan untuk menghapus.
Seperti biasa, kita harus memberikan titik koordinat x dan y. Sementara nilai w dan h untuk lebar dan tingginya.

Mari kita coba:

Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tutorial HTML 5 Canvas</title>
    </head>
    <body>

        <canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;">
        </canvas>

        <script type="text/javascript">
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");

            ctx.strokeRect(10,10,100,100);
            ctx.fillRect(120,10,100,100);

        </script>

    </body>
</html>
hasil-gambar-persegi-di-canvas.png

Lalu bagaimana contoh yang clearRect()?

Method clearRect() digunakan untuk menghapus gambar.

Contohnya: Kita ingin menhapus pada titik (5,5) sampai (20,20).

Code:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.strokeRect(10,10,100,100);
ctx.clearRect(5,5,20,20);
ctx.fillRect(120,10,100,100);
hasil-gambar-clearrect.png

Cara Menggambar Segitiga pada Canvas
Segitiga tidak memiliki method tesendiri seperti persegi (rectangle). Namun, bukan berarti kita tidak bisa menggambarnya.

Segitiga dapat digambar menggunakan fungsi/method dari garis.

Contohnya:

Code:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");


ctx.beginPath(); // mulai menggmabar
ctx.moveTo(100, 100); // titik awal
ctx.lineTo(100, 300); // titik ke-2
ctx.lineTo(300, 300); // titik ke-3
ctx.closePath(); // titik ke-3 ke titik awal

// buat garis
ctx.stroke();

Maka hasilnya:


hasil-gambar-segitiga-di-canvas.png

Perhatikan: di sana ada fungsi ctx.closePath(), tugasnya untuk menggambar garis dari titik terakhir ke titik awal.

Pertama gambar garis dari titik awal ke titik ke-2:


Code:
ctx.moveTo(100, 100);
ctx.lineTo(100, 300);

titik-awal-ke-2.png


Lalu buat garis dari titik ke-2 menuju ke titik 3:


Code:
ctx.lineTo(300, 300);

titik-2-3.png


Terakhir, buat garis dari titik ke-3 menuju ke titik awal:


Code:
ctx.closePath();
closePath.png


Cara Menggambar Lingkaran pada Canvas
Lingkaran digambar dengan method arc(). Method ini memiliki 5 parameter yang wajib diberikan.

Code:
ctx.arc(x, y, r, sudutAwal, sudutAkhir, arah);

Paramter:
  • x untuk menentukan koordinat x;
  • y untuk menentukan koordinat y;
  • r untuk menentukan jari-jari lingkaran;
  • sudutAwal sudut awal dengan satuan radian (0 radian dimulai dari arah jam 3);
  • sudutAkhir sudut akhir dengan satuan radian;
  • arah (opsional) untuk menentukan arah menggambar lingkaran:
    • jika diberikan nilai true maka akan menggambar berlawanan dengan arah jarum jam.
    • jika false maka akan menggambar searah dengan jarum jam.
    • Nilai default-nya adalah false.
Code:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2*Math.PI);
ctx.stroke();

hasil-gambar-lingkaran-di-canvas.png


Pertama kita mulai menggmabar dengan beginPath(), gunakan selalu fungsi ini untuk mulai menggmabar.

Kedua menggmabar lingkaran dengan fungsi arc() dengan parameter yang ditentukan. Lingkaran digambar pada titik (95, 50) dengan ukuran jari-jari 40 piksel.

Mulai digambar dari arah jam 3 (0 radian) menuju kembali ke arah jam 3 (2*π radian). 4


300px-Circle_radians.gif


Gampang kan?

Cara Meyisipkan Teks pada Canvas
Ada dua fungsi untuk membuat teks:

  1. strokeText() untuk teks dengan garis luar (outline) saja.
  2. fillText() untuk teks dengan warna (default hitam).
Fungsi tersebut memiliki tiga parameter yang wajib diberikan:

Code:
ctx.fillText("Teks yang akan dibuat", x, y);

Code:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.font = "30px arial";
ctx.fillText("Terima kasih sudah berkunjung ke:",10,50);

ctx.font = "64px Arial";
ctx.strokeText("PETANIKODE.com",10,120);

Ada pengisian atribut font pada kode di atas.


Code:
ctx.font = "64px Arial";

Fungsinya untuk menentukan jenis font serta ukurannya. Nilainya seperti nilai atribut font pada CSS.

Cara Me-render Gambar pada Canvas
Terakhir, kita akan coba me-render gambar ke canvas. Untuk melakukannya, kita membutuhkan sebuah gambar dan menggunakan fungsi drawImage() untuk merender-nya ke canvas.

Code:
drawImage(img, x, y);
Kita akan menggunakan gambar dari W3Schools: img_the_scream.jpg.

Pertama silahkan buat elemen <img>:

Code:
<p>Gambar yang akan di-render:</p>
<img id="scream" src="https://www.w3schools.com/html/img_the_scream.jpg" alt="The Scream" width="220" height="277">

Kemudian buat tombol render:


Code:
<p><button onclick="renderImage()">Render Image</button></p>

Terakhir membuat fungsi renderImage():
Code:
function renderImage() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    // ambil gambar dari elemen <img>
    var img = document.getElementById("scream");

    // render ke Canvas
    ctx.drawImage(img,10,10);
}

Kode lengkapnya:


Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tutorial HTML 5 Canvas</title>
    </head>
    <body>

        <p>Gambar yang akan di-render:</p>
        <img id="scream" src="https://www.w3schools.com/html/img_the_scream.jpg" alt="The Scream" width="220" height="277">

        <p><button onclick="renderImage()">Render Image</button></p>

        <canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;">
        </canvas>


        <script type="text/javascript">
        function renderImage() {
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");

            // ambil gambar dari elemen <img>
            var img = document.getElementById("scream");

            // render ke Canvas
            ctx.drawImage(img,10,10);
        }
        </script>

    </body>
</html>

render-image-ke-canvas.png
 
Menggambar Objek dengan Perulangan dan Fungsi Random di HTML5 Canvas

Bagaiaman kalau kita ingin menggambar banyak objek dan digambar secara acak?

Untuk menjawab pertanyaan ini, kita harus menggunakan perulangan dan fungsi random().

Lebih jelasnya, mari kita bahas…

Menggambar Objek dengan Perulangan
Pada contoh di artikel sebelumnya, kita sudah pernah menggamabar persegi dua kali.

Code:
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.strokeRect(10,10,100,100);
    ctx.fillRect(120,10,100,100);
</script>

Dengan hasil seperti ini:
hasil-gambar-persegi-di-canvas.png


Lalu bagaimana kalau kita ingin menggambar 10 persegi?

Kita bisa saja mengetik ulang fungsi untuk menggambarnya sebanyak 10x.

Code:
ctx.strokeRect(10,10,100,100);
ctx.strokeRect(110,10,100,100);
ctx.strokeRect(210,10,100,100);
ctx.strokeRect(310,10,100,100);
ctx.strokeRect(410,10,100,100);
ctx.strokeRect(510,10,100,100);
ctx.strokeRect(610,10,100,100);
ctx.strokeRect(710,10,100,100);
ctx.strokeRect(810,10,100,100);
ctx.strokeRect(910,10,100,100);

Terus kalau mau gambar sebanyak 1000x?

Apa mampu mengetik kode sebanyaka 1000 baris?

Pasti capek ngetik 1000 baris dengan nilai x dan y yang berbeda-beda.

karena itu, kita harus menggunakan perulangan.

Contoh:

Kita akan menggmabar 5 persegi dengan nilai x bertambah 10 di setiap kali perulangan dan y tetap.

Code:
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(x = 10; x <= 50; x+=10){
        ctx.strokeRect(x, 10, 10, 10);
    }
</script>

Kita akan menggmbar persegi dengan ukuran 10x10 pada titik y=10 dan x berubah-ubah.

Setiap perulangan nilai x akan bertambah 10.

Code:
perulangan ke 1, nilai x = 10 dan y = 10
perulangan ke 2, nilai x = 20 dan y = 10
perulangan ke 3, nilai x = 30 dan y = 10
perulangan ke 4, nilai x = 40 dan y = 10
perulangan ke 5, nilai x = 50 dan y = 10

Kalau kita nyatakan dalam persamaan garis lurus matematika:
Code:
y = 10 (nilai y tetap 10)

*ingat-ingat kembali pelajaran matematika (persamaan garis lurus, fungsi, dan aljabar linier)

Hasilnya:

gambar-5persegi.png


Sekarang coba gambar sebanyak 50x:

Code:
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(x = 10; x <= 500; x+=10){
        ctx.strokeRect(x, 10, 10, 10);
    }
</script>

gambar-50persegi.png


Sudah paham sekarang…?

Lalu bagaimana kalau nilai y-nya sekarang yang berubah-ubah.

Gampang, kita tinggal ubah menjadi seperti ini:

Code:
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(y = 10; y <= 500; y+=10){
        ctx.strokeRect(10, y, 10, 10);
    }
</script>

gambar-50persegi-y.png


Mari kita coba kedua-duanya berubah (nilai x dan y berubah).

Code:
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(i = 10; i <= 500; i+=10){
        ctx.strokeRect(i, i, 10, 10);
    }
</script>

gambar-persegi-xy.png


Menggunakan Perulangan Bersarang
Perulangan bersarang (nested loop) artinya perulangan dalam perulangan.

Sekarang mari kita coba menggambar persegi sebanyak 40 ke arah x (horizontal) dan 40 ka arah y (vertikal) dengan perulangan bersarang.

Code:
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(x = 10; x <= 400; x+=10){
        for(y = 10; y <= 400; y+=10){
            ctx.strokeRect(x, y, 10, 10);
        }
    }
</script>

Maka banyak persegi yang akan digambar adalah 1600 buah persegi.
gambar-persegi-40x40.png


Sekarang bagaimana kalau nilai y pada perulangan ke-2 kita set nilai awalnya adalah x.
Code:
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(x = 10; x <= 400; x+=10){
        for(y = x; y <= 400; y+=10){
            ctx.strokeRect(x, y, 10, 10);
        }
    }
</script>

gambar-persegi-40x40-2.png


Selanjutnya saya akan memperlihatkan hasil kreasi saya yang bisa kamu ikuti dan silahkan pikirkan bagaimana gambarnya bisa terbentuk .

Kode:

Code:
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(x = 10; x <= 400; x+=10){
        for(y = 10; y <= 400; y+=10){

            if((y*x) % 200 != 0){
                ctx.strokeRect(x, y, 10, 10);
            } else {
                ctx.fillRect(x, y, 10, 10);
            }

        }
    }
</script>

eksperimen1.png


Code:
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(x = 10; x <= 400; x+=10){
        for(y = 10; y <= 400; y+=10){

            if((y*x) % 21 == 0){
                ctx.strokeRect(x, y, 10, 10);
            } else {
                ctx.fillRect(x, y, 10, 10);
            }
        }
    }
</script>

eksperimen2.png


Itu saja ya…agar tutorial ini tidak kepanjangan.

Silahkan lanjutkan berkresi sendiri!

Menggambar Objek dengan Fungsi Math.random()
Fungsi random() adalah fungsi yang menghasilkan nilai acak dari 0,0 sampai 1,0. Fungsi ini akan kita manfaatkan untuk menentukan nilai x dan y agar objek yang kita gambar diletakkan secara acak di canvas.

Berikut ini contoh nilai yang dihasilkan oleh fungsi random().


fungsi-random.png


Karena fungsi random() menghasilkan nilai 0,xxx maka kita harus mengubahnya menjadi bilangan desimal (integer).

Caranya kita bisa memanfaatkan fungsi floor() untuk melakukan pembulatan nilai.

Misalnya seperti ini:

Code:
Math.floor(Math.random() * 5)

Code:
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(i = 0; i < canvas.width; i++){
        for(j = 0; j < canvas.height; j++){

            // isi nilai titik dengan bilangan acak
            var x = Math.floor(Math.random() * canvas.width);
            var y = Math.floor(Math.random() * canvas.height);

            // gambar titknya
            ctx.fillRect(x, y, 1,1);

        }
    }
</script>

gambar-titik-random.png

Coba kita gambar titik sebanyak 10000 atau 100x100.


Code:
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(i = 0; i < 100; i++){
        for(j = 0; j < 100; j++){

            // isi nilai titik dengan bilangan acak
            var x = Math.floor(Math.random() * canvas.width);
            var y = Math.floor(Math.random() * canvas.height);

            // gambar titknya
            ctx.fillRect(x, y, 1,1);

        }
    }
</script>

gambar-titik-random-1000.png


Selanjutnya kita modifikasi kodenya.

Silahkan perbesar ukuran perseginya menjadi 10x10 dan gambar sebanyak 200 kali. Kita pakai dua persegi, yaitu strokeRect() sebanyak 100 dan fillRect() sebanyak 100.

Code:
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(i = 0; i < 10; i++){
        for(j = 0; j < 10; j++){

            // isi nilai titik dengan bilangan acak
            var x = Math.floor(Math.random() * canvas.width);
            var y = Math.floor(Math.random() * canvas.height);

            // gambar perseginya
            ctx.fillRect(x, y, 10,10);

        }
    }

    for(i = 0; i < 10; i++){
        for(j = 0; j < 10; j++){

            // isi nilai titik dengan bilangan acak
            var x = Math.floor(Math.random() * canvas.width);
            var y = Math.floor(Math.random() * canvas.height);

            // gambar perseginya
            ctx.strokeRect(x, y, 10,10);

        }
    }
</script>

gambar-persegi-random.png


Coba juga untuk berkreasi dengan lingkaran.


Code:
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(i = 0; i < 10; i++){
        for(j = 0; j < 10; j++){

            // isi nilai titik dengan bilangan acak
            var x = Math.floor(Math.random() * canvas.width);
            var y = Math.floor(Math.random() * canvas.height);

            // gambar lingkaran
            ctx.beginPath();
            ctx.arc(x, y, 20, 0, 2*Math.PI);
            ctx.stroke();

        }
    }
</script>

gambar-lingkaran-random.png


Coba juga jari-jarinya kita kasih acak, misal dari 5 sampai 30.


Code:
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(i = 0; i < 10; i++){
        for(j = 0; j < 10; j++){

            // isi nilai titik dengan bilangan acak
            var x = Math.floor(Math.random() * canvas.width);
            var y = Math.floor(Math.random() * canvas.height);

            // jari-jari random dari 5 sampai 30
            var r = Math.floor( Math.random() * (30 - 5) + 5 );

            // gambar lingkaran
            ctx.beginPath();
            ctx.arc(x, y, r, 0, 2*Math.PI);
            ctx.stroke();

        }
    }


</script>

gambar-lingkaran-random-r.png


Begitulah cara menggambar objek dengan perulangan dan fungsi random. Fungsi random kadang digunakan dalam Game untuk menggambar objek dalam posisi acak.

Misal pada Game Flappy Bird, pipa penghalangnya diletakkan secara acak dengan fungsi random.

Pada kesempatan selanjutnya mungkin kita akan bahas tentang warna dan animasi.

Terima kasih sudah mengikuti tutorial ini. Kalau ada pertanyaan atau tambahan silahkan sampaikan di komentar.

Selamat berkerasi dan berimajinasi dengan kode.

Referensi:

 
Terakhir diubah:
Mengenal HTML5 Vibration API untuk Membuat Getaran di HP
Artikel kali ini terinspirasi dari pembicaraan teman-teman di grup Pojok Programmer tentang link download palsu yang mengarahkan ke link iklan.
diskusi-getaran.png

Sebagian halaman web menggunakan getaran untuk mengambil perhatian dari pengunjungnya, terutama halaman web yang penuh dengan iklan.

Membaca komentar-komentar mereka membuat saya teratrik ingin tahu cara membuat getaran di web.

Langsunga saja saya menuju ke Google dan memasukan kata kunci “js vibrate phone” dan hasilnya ternya menggunakan HTML5 Vibration API.

googling-js-vibrate.png

Apa itu HTML5 Vibration API?
HTML5 Vibration API adalah API (Application Programming Interface) untuk membuat getaran pada web yang bertujuan memberikan umpan balik pada kejadian tertentu.

Menurut penjelasan MDN (Mozilla Developer Network) getaran itu sendiri didefinisikan sebagai pola dari gelombang pulsa on-off yang memiliki panjang dalam bentuk integer. Panjang gelombang tersebut menentukan lama getarananya.

contoh-gelombang-pulsa.png

Pada contoh gelombang pulsa di atas, getaran akan mulai (on) selama 200 ms (milidetik). Setelah itu diam selama 250 ms, kemudian lanjut lagi selama 1000 ms atau 1 detik.

Cara Menggunakan HTML5 Vibration API
HTML5 Vibration API menyediakan fungsi vibrate() untuk membuat getaran. Bentuk sintaksnya seperti ini:

Code:
window.navigator.vibrate(pola);

Nilai paramter pola dapat kita isi dengan nilai panjang getarannya.

Misalnya kita ingin membuat getaran selama 1 detik:

Code:
window.navigator.vibrate(1000);

Kita tinggal membuat pola dari pulsa getarannya.

Code:
window.navigator.vibrate([1000, 500, 1000]);

Artinya gelombang akan dimulai selama 1000 ms (1 detik), kemudian berhenti selama 500 ms. Setelah itu bergetar lagi selama 1000 ms.

Untuk menghentikan getaran, kita bisa memberikan nilai nol (0) kepada fungsi vibrate().

Code:
window.navigator.vibrate(0);

Mari kita bereksperimen…
Silahkan buat file HTML baru, dan simpan di direktori htdocs atau /var/www/html. Kemudian isi dengan kode ini:

Code:
<!DOCTYPE html>
<html>
<head>
    <title>Tutorial HTML5 Vibration API</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script type="text/javascript">
        // fungsi ini akan kita panggil saat tombol diklik
        function buatGetaran(pola){
            var getaran = window.navigator.vibrate(pola);

            // tampilkan hasilnya ke console
            // kalau true berarti browser mendukung untuk membuat getaran
            // tapi kalau false browser tidak mendukung
            console.log(getaran);
        }
    </script>
</head>
<body>
    <p>Coba klik tombol berikut:</p>
    <button onclick="buatGetaran(1000)">Bergetar!!!</button>

    <button onclick="buatGetaran([1000, 500, 1000])">Bergetar 2x!!!</button>

    <button onclick="buatGetaran([200, 500, 300, 100, 400])">Bergetar 3x!!!</button>
</body>
</html>

Kenapa harus simpan di htdocs, kan gak ada PHP-nya?

Karena nanti agar bisa kita coba melalui HP.

Percobaan di browser Desktop
Sebelum mencoba di HP, kita coba dulu di browser desktop (menggunakan google chrome).

percobaan-getaran-desktop.png


Hasilnya true, berarti browser kita mendukung untuk membuat getaran.

Tapi kok tidak terjadi getaran?

Ya iya lah, perangkat keras (hardware) komputer atau laptopnya tidak mendukung.

Percobaan di Handphone
Percobaan saya lakukan dengan tethering WiFi dari HP ke Laptop, bisa juga sebaliknya.

Laptop sebagai server web, dan HP sebagai client atau pengunjung web. Berarti kita harus tahu IP dari laptopnya, barulah kita buka melalui browser.

percobaan-getaran-di-hp.jpg


Coba klik tombolnya!
Live Demo bisa dicek di link ini: https://******/8SPWt8 atau scan QR Code berikut:
https://chart.googleapis.com/chart?cht=qr&chs=150x150&choe=UTF-8&chld=H&chl=https://******/8SPWt8

Apakah terjadi getaran atau tidak?

Kalau tidak, berarti browser-nya tidak mendukung. Coba gunakan Google Chrome versi terbaru.

Berikut ini daftar versi browser yang mendukung:

daftar-versi-browser-yang-mendukung-getaran.png


Sumber: developer.mozilla.org

Ide Eksperimen Selanjutnya
  • Buat getaran kalau gagal login.
  • Integrasikan dengan GPS, misal buat getaran saat berada di lokasi tertentu.
  • Buat getaran berdasarkan gelombang audio.
  • Terapkan di Game, misal buat getaran saat terjadi benturan dalam Game.
Ada ide lagi?

Tambahkan di komentar!

Akhir Kata…
Menyenangkan bukan bermain HTML5 Vibration API… Selanjutnya silahkan lakukan eksperimen sendiri yang lebih kreatif dan keren.

Terima kasih sudah menyimak artikel ini sampai akhir.

Referensi:
 
Cara Mengakses Webcam dari HTML dan Mengambil Gambar


Biasanya pada web-web tertentu kita membutuhkan Webcam untuk mengambil gambar, misalnya pada web yang mimiliki fitur Video Call seperti Facebook.

Kalau dulu, hal ini mungkin dilakukan dengan bantuan Plug-in seperti Flash dan Silverlight.

Namun, sekarang HTML5 sudah menyediakan API yang bisa kita gunakan untuk mengakses Webcam secara native.

Pada kesempatan ini, kita akan belajar cara mengakses Webcam untuk ditampilkan di dalam halaman web dan mengambil gambar.
Bagaimana Cara Kerjanya?
Pertama kita membutuhkan izin user, apakah dia mau memberikan akses webcam atau tidak.

Metode atau method yang digunakan untuk meminta izin user adalah getUserMedia. Method ini tidak hanya untuk mengakses webcam saja, kita juga bisa mengakses media lain seperti mikrofon.

Setelah user memberikan izin, selanjutnya kita tinggal render gambar dari webcam ke elemen <video>.

Elemen <video> merupakan elemen baru yang ditambahkan pada HTML 5 untuk menampilkan video.

Untuk lebih jelasnya, mari kita coba dalam kode…

Menampilkan Video Webcam di HTML
Pertama silahkan buat sebuah file HTML.

Code:
<div>
    <video autoplay="true" id="video-webcam">
        Browsermu tidak mendukung bro, upgrade donk!
    </video>
</div>

Pada file HTML di atas, kita memberikan atribut autoplay="true" agar videonya diputar secara otomatis dan id="video-webcam" untuk memudahkan pemilihan elemen di Javascript.

Setelah itu, silahkan buat kode Javascript-nya:

Code:
<script type="text/javascript">
    // seleksi elemen video
    var video = document.querySelector("#video-webcam");

    // minta izin user
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

    // jika user memberikan izin
    if (navigator.getUserMedia) {
        // jalankan fungsi handleVideo, dan videoError jika izin ditolak
        navigator.getUserMedia({ video: true }, handleVideo, videoError);
    }

    // fungsi ini akan dieksekusi jika  izin telah diberikan
    function handleVideo(stream) {
        video.srcObject = stream;
    }

    // fungsi ini akan dieksekusi kalau user menolak izin
    function videoError(e) {
        // do something
        alert("Izinkan menggunakan webcam untuk demo!")
    }
</script>

Silahkan simpan di dalam direktori htdocs atau /var/www/html, lalu buka melalui alamat http://localhost/namafile.html.

Kenapa harus disimpan di sana?

Karena jika tidak disimpan di server web, videonya tidak akan mau di-render.

Mengambil Gambar dari Webcam
Kita baru saja membuat kode HTML dan Javascript untuk menampilkan video dari webcam.

Lalu…

Bagaimana kalau kita ingin mengambil gambar?

Gampang.

Kita tinggal buat sebuah tombol dan saat tombol tersebut diklik, kita eksekusi fungsi untuk mengambil gambar.

Berikut ini kode fungsi untuk mengambil gambar:

Code:
function takeSnapshot() {
    // buat elemen img
    var img = document.createElement('img');
    var context;

    // ambil ukuran video
    var width = video.offsetWidth
            , height = video.offsetHeight;

    // buat elemen canvas
    canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;

    // ambil gambar dari video dan masukan
    // ke dalam canvas
    context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, width, height);

    // render hasil dari canvas ke elemen img
    img.src = canvas.toDataURL('image/png');
    document.body.appendChild(img);
}

Fungsi di atas akan membuat sebuah elemen <img> untuk menampung gambar Snapshot dari elemen Video.
Setelah itu tinggal ditampilkan ke dalam elemen <img>.

Selanjutnya silahkan buat sebuah tombol untuk mengeksekusi fungsi tersebut.

Code:
<button onclick="takeSnapshot()">Ambil Gambar</button>

Selesai, silahkan dicoba.
 
Terakhir diubah:
Google Maps API: Menampilkan Peta Google Map di dalam Web

/! comingsoon /
 
terima kasih untuk ilmunya gan..., sehat2 selalu dan moga bisa update lagi
 
Wah sangat detail sekali Hu, terima kasih, btw punya chanel Youtube ga Hu?
 
pernah nyobain ini tapi lupa ambil API Keynya dimana, kalo ga salah di console google ya mas?
Betul mas ambil api Google Di consule bikin create project dan creat credentialnya aktifin API .copas key nya.
 
Jav Toys
Gaple Online Indonesia
Pasang iklan hanya lewat CONTACT US
Back
Top
We are now part of LS Media Ltd