Cara Belajar Apa

Browser Anda tidak dapat memutar video ini

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… 1

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. 2

Canvas adalah elemen baru di HTML5 untuk menggambar (render) grafik, image, dan teks.

Cara Membuat Canvas di HTML

Canvas dapat dibuat dengan tag <!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>3, jangan lupa juga untuk memberikan ukuran tinggi dan lebarnya.

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

Kita berikan sedikit style <!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>4 untuk membuat garis tepi.

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

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

Fungsi <!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>5 untuk memilih elemen HTML dengan id <!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>6.

Selanjutnya variabel <!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>7 (konteks) adalah objek dari canvas yang bisa kita manfaatkan untuk menggambar.

Contoh kode lengkapnya:

<!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…

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 <!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>7.

Objek <!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>7 bisa kita anggap sebagai pensil. Objek ini memiliki beberapa method untuk menggambar di canvas seperti ctx.fillRect(x,y,1,1);0, ctx.fillRect(x,y,1,1);1, ctx.fillRect(x,y,1,1);2, dsb.

Nah untuk menggambar dengan method-method tersebut, kita harus menentukan koordinat titik ctx.fillRect(x,y,1,1);3 dan ctx.fillRect(x,y,1,1);4-nya.

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

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 ctx.fillRect(x,y,1,1);5-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 ctx.fillRect(x,y,1,1);0 dengan ukuran 1x1 piksel.

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

Variabel ctx.fillRect(x,y,1,1);3 dan ctx.fillRect(x,y,1,1);4 kita ganti dengan nilai koordinatnya, misalkan kita ingin menggambar titik pada koordinat ctx.fillRect(x,y,1,1);9.

ctx.fillRect(10,10,1,1);

Mari kita coba dalam kode:

<!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>

Hasilnya:

(Lakukan pembesaran (zoom in) 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.fillRect(10,10,1,1);0 untuk membuat garis baru.
  2. ctx.fillRect(10,10,1,1);1 untuk menentukan titik awal.
  3. ctx.fillRect(10,10,1,1);2 untuk menentukan titik akhir.
  4. ctx.fillRect(10,10,1,1);3 untuk menggambar garisnya.

Mari kita coba…

Misalkan kita ingin menggambar garis dari titik ctx.fillRect(x,y,1,1);9 sampai titik ctx.fillRect(10,10,1,1);5.

<!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>

Hasilnya:

Cara Menggambar Persegi pada Canvas

Ada tiga fungsi yang digunakan untuk menggambar persegi pada canvas:

  1. ctx.fillRect(10,10,1,1);6 persegi dengan garis (outline) saja.
  2. ctx.fillRect(10,10,1,1);7 persegi dengan polesan warna (default-nya hitam).
  3. ctx.fillRect(10,10,1,1);8 persegi transparan untuk menghapus.

Seperti biasa, kita harus memberikan titik koordinat ctx.fillRect(x,y,1,1);3 dan ctx.fillRect(x,y,1,1);4. Sementara nilai <!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>1 dan <!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>2 untuk lebar dan tingginya.

Mari kita coba:

<!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>

Hasilnya:

Lalu bagaimana contoh yang <!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>3?

Method <!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>3 digunakan untuk menghapus gambar.

Contohnya: Kita ingin menhapus pada titik <!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>5 sampai <!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>6.

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);

Maka hasilnya:

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:

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:

Perhatikan: di sana ada fungsi <!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>7, tugasnya untuk menggambar garis dari titik terakhir ke titik awal.

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

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

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

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

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

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

Maka jadilah segitiga… 😄

Cara Menggambar Lingkaran pada Canvas

Lingkaran digambar dengan method ctx.fillRect(x,y,1,1);1. Method ini memiliki 5 parameter yang wajib diberikan.

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

Paramter:

  • ctx.fillRect(x,y,1,1);3 untuk menentukan koordinat ctx.fillRect(x,y,1,1);3;
  • ctx.fillRect(x,y,1,1);4 untuk menentukan koordinat ctx.fillRect(x,y,1,1);4;
  • <!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>3 untuk menentukan jari-jari lingkaran;
  • <!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>4 sudut awal dengan satuan radian (ctx.fillRect(x,y,1,1);5 radian dimulai dari arah jam 3);
  • <!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>6 sudut akhir dengan satuan radian;
  • <!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>7 (opsional) untuk menentukan arah menggambar lingkaran:
    • jika diberikan nilai <!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>8 maka akan menggambar berlawanan dengan arah jarum jam.
    • jika <!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>9 maka akan menggambar searah dengan jarum jam.
    • Nilai default-nya adalah <!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>9.

Paham…?

Mari kita coba:

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

Hasilnya:

Penjelasan:

Pertama kita mulai menggmabar dengan <!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>1, gunakan selalu fungsi ini untuk mulai menggmabar.

Kedua menggmabar lingkaran dengan fungsi ctx.fillRect(x,y,1,1);1 dengan parameter yang ditentukan. Lingkaran digambar pada titik <!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>3 dengan ukuran jari-jari <!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>4 piksel.

Mulai digambar dari arah jam 3 (ctx.fillRect(x,y,1,1);5 radian) menuju kembali ke arah jam 3 (<!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>6 radian). 4

Gampang kan?

Cara Meyisipkan Teks pada Canvas

Ada dua fungsi untuk membuat teks:

  1. <!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>7 untuk teks dengan garis luar (outline) saja.
  2. ctx.fillRect(x,y,1,1);2 untuk teks dengan warna (default hitam).

Fungsi tersebut memiliki tiga parameter yang wajib diberikan:

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

Mari kita coba:

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

Hasilnya:

Ada pengisian atribut <!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>9 pada kode di atas.

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

Fungsinya untuk menentukan jenis font serta ukurannya. Nilainya seperti nilai atribut <!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>9 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 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);1 untuk merender-nya ke canvas.

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

Kita akan menggunakan gambar dari W3Schools: img_the_scream.jpg.

Pertama silahkan buat elemen 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);2:

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

Kemudian buat tombol render:

<!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>0

Terakhir membuat fungsi 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);3:

<!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>1

Kode lengkapnya:

<!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>2

Hasilnya:

Mudah bukan…?

Pemrograman Game Berbasis HTML5

Ilmu di atas belumlah cukup untuk membuat game berbasis HTML5 dari nol, karena hanya pengenalan saja. Kita harus pelajari ilmu yang lainnya, seperti:

  • Membuat objek secara acak di Canvas
  • Cara Membuat Animasi di Canvas;
  • Cara Membuat Gravitasi dan Menerapkan Elemen Fisika Lainnya;
  • Cara Memutar Audio untuk Game;
  • Logika Game dan sistem Poin;
  • Logika Kode untuk Benturan (Collision);
  • dan sebagainya.

Bila kamu tidak ingin membuat semua itu dari nol, gunakanlah Game Engine. Karena sudah dibuatkan di sana dan kita tinggal pakai saja.

Daftar Game Engine berbasis HTML5 dapat dilihat di: html5gameengine.com

Pemrograman Grafis atau Grafika Komputer

Nah, buat kamu yang tertarik ke pemrograman grafis, bisa coba-coba ide eksperimen berikut:

  • Membuat Aplikasi Painting Berbasis HTML5;
  • Membuat Photoshop sendiri;
  • Menerapkan algoritma grafika komputer seperti algoritma membuat garis;
  • Pengolahan Citra dan Computer Vision;
  • Membuat Diagram Interaktif;
  • Me-render Gambar dari Webcam ke Canvas
  • dan sebagainya.

Akhir Kata…

Terima kasih sudah menyimak artikel ini sampai akhir. Selamat belajar dan berimajinasi dengan kode.

Selanjutnya silahkan pelajari tentang “ Cara Menggambar Menggunakan Perulangan dan Fungsi Random pada Canvas”.

Pos Terkait

Bagaimana cara ada suara di Zoom saat share screen?
Alat musik apa yang digunakan untuk membedakan panjang pendek bunyi lagu bangun tidur?
Apakah perbedaan antara Google Classroom dengan Edmodo?
Air fryer apakah bisa untuk memasak nasi?
Apakah menggunakan mode pesawat bisa merusak HP?
How to change Instagram time zone
Kenapa mata terasa sakit seperti ditekan?
Apa saja istilah di Mobile Legend?
Jelaskan apa yang dimaksud dengan kriteria ketuntasan minimal dan sebutkan fungsinya?
Mengapa fotosintesis sangat penting bagi kehidupan di muka Bumi?

Toplist

#1
Top 10 jelaskan apa yang dimaksud dengan aspek praktika berikan contohnya dalam syair lagu sirih kuning 2022
#2
Top 10 ketika menarik mobil-mobilan gaya yang digunakan adalah a listrik b otot c magnet d gravitasi 2022
#3
Top 9 mengapa proses sosial dalam masyarakat desa berjalan dengan lambat? 2022
#4
Top 10 mengapa semua masyarakat harus menjaga keanekaragaman makhluk hidup jelaskan alasanmu 2022
#5
Top 10 tahapan dalam penulisan kembali peristiwa atau kejadian sejarah adalah 2022
#6
Top 10 perhatikan pola bilangan berikut 2 3 5 7 11 2 3 5 7 11 2 3 5 7 11 bilangan pada urutan ke 99 adalah 2022
#7
Top 10 berikut yang bukan merupakan fungsi hutan secara alamiah adalah 2022
#8
Top 10 suatu segitiga dengan ukuran alas sisinya 10 cm dan tingginya 6 cm luasnya adalah 2022
#9
Top 10 tuliskan dua contoh pemanfaatan gaya listrik dalam kehidupan sehari-hari 2022

Postingan terbaru

LIHAT SEMUA

Kiat Bagus Yang Cara Belajar Apa Location Jelaskan Sebutkan Teknologi Kesehatan dan kecantikan Apa arti Arti kata Bagaimana Contoh Apa yang Toplist disebut Berapa Fungsi Berikut ini Review Harus Makanan lezat Tentang Mengapa Dimaksud Beda Anak Permainan Belajar dengan baik Teknik Berikut yang Facebook Tujuan Membandingkan Cryto Perbedaan topten Berapa lama Sains Hubungan Daftar Teratas Jawa Timur Tempat Kenapa Konstruksi Jawa Barat Jawa Tengah Pil Sekolah Rumah