Menggambar Grafis 2D pada Aplikasi Tizen Menggunakan HTML Canvas API

HTML5 hadir dengan teknologi canvas yang memungkinkan kita untuk menggambar bentuk dengan format vector. Kita dapat membuat gambar bentuk langsung pada canvas HTML menggunakan canvas API. Ada banyak library JavaScript yang dapat kita gunakan untuk memudahkan pekerjaan dengan canvas. Tapi pada tutorial kali ini kita akan berkenalan dan belajar dengan API canvas untuk menggambar objek 2D pada aplikasi Tizen web mobile.

Pendahuluan

Buat project baru di Tizen IDE dengan mengakses menu File > New > Tizen Web Project. Pada tab Template, pilih template Basic. Lalu klik tombol Finish.

Buka file index.html, kemudian hapus semua konten yang ada di dalam tag body lalu masukkan kode html berikut:

<canvas id="demoCanvas" width="360" height="640"></canvas>

Kita menambahkan tag <canvas> untuk tempat kita menggambar objek.

Kemudian tambahkan tag <script> di bagian bawah canvas beserta kode JavaScript berikut:

<script>
       var canvas = document.getElementById('demoCanvas');

       var circle = canvas.getContext('2d');
       circle.arc(100, 100, 100, 0, 2 * Math.PI);

       circle.fillStyle = "yellow";
       circle.fill();
</script>

Pada kode di atas, kita membuat variabel canvas untuk menyimpan objek canvas. Kita kemudian membuat variabel circle untuk membuat objek lingkaran.

Method arc adalah method yang kita gunakan untuk menggambar bentuk lingkaran. Parameter pertama dan kedua adalah koordinat x dan y dari pusat lingkaran. Parameter ketiga adalah nilai panjang radius lingkaran. Parameter keempat adalah sudut awal untuk mulai menggambar dan parameter kelima diisi oleh nilai sudut akhir menggambar. Nilai sudut yang kita gunakan adalah dalam format radian, bukan derajat. Satu putaran penuh lingkaran bernilai 360 derajat yang dalam nilai radian adalah 2 * Math.PI.

Properti fillStyle kita isi dengan kode warna untuk mengisi objek lingkaran. Untuk mengisi objek lingkaran dengan warna, kita gunakan method fill().

Jalankan project pada Tizen Web Simulator, maka seharusnya pada simulator akan nampak lingkaran berwarna kuning seperti pada gambar berikut:

Sekarang tambahkan kode berikut setelah kode terakhir di atas:

circle.strokeStyle = "red";
circle.lineWidth = 5;
circle.stroke();

Kode di atas akan membuat garis outline berwarna merah pada objek lingkaran dengan lebar garis sebesar 5 piksel.

Membuat Objek Persegi

Untuk membuat objek persegi atau persegi panjang, kita gunakan method rect().

var rect = canvas.getContext('2d');
rect.rect(10, 10, 200, 200);
rect.fillStyle = "yellow";
rect.fill();
rect.strokeStyle = "red";
rect.lineWidth = 5;
rect.stroke();

Sama seperti objek yang kita buat sebelumnya, untuk mengisi objek dengan warna kita set properti fillStyle dan render dengan method fill(). Begitu pula untuk mengeset outline objek kita gunakan method stroke().

Kita juga dapat menggunakan method fillRect() untuk membuat objek persegi yang langsung terisi oleh warna. Warna default yang digunakan untuk mengisi objek adalah hitam. Untuk mengubah warna isi objek, kita set terlebih dahulu properti fillStyle sebelum memanggil method fillRect(). Hal yang sama juga dapat kita lakukan untuk membuat objek yang langsung memiliki garis outline, dengan memanggil method strokeRect().

var rect = canvas.getContext('2d');

rect.fillStyle = "yellow";
rect.fillRect(10, 10, 150, 150);

rect.strokeStyle = "red";
rect.lineWidth = 5;
rect.strokeRect(170, 10, 150, 150);

Membuat Objek Kustom

Kita juga dapat menggambar objek lain yang bentuknya kustom dengan memanfaatkan beberapa API lain seperti lineTo(), arcTo(), dan bezierCurveTo(). Sebagai contoh, kita akan menggambar objek seperti berikut:

Maka cara menggambarnya adalah seperti kode berikut:

var check = canvas.getContext('2d');
check.beginPath();
check.moveTo(0, 180);
check.lineTo(60, 120);
check.lineTo(120, 180);
check.lineTo(300, 0);
check.lineTo(360, 60);
check.lineTo(120, 300);
check.lineTo(0, 180);

check.fillStyle = "green";
check.fill();

Hasilnya bila kita jalankan di Web Simulator, akan tampil objek seperti berikut:

Pertama-tama kita memanggil method beginPath() untuk memulai/mereset gambar. Kemudian kita pindahkan pointer ke koordinat 0,180 menggunakan method moveTo(). Kita mulai membuat garis dari titik tersebut ke titik-titik selanjutnya menggunakan method lineTo(x,y). Seperti pada gambar ilustrasi di awal, saya sudah membuat sketsa objek dengan membagi area dengan grid yang lebarnya mudah dibagi, sehingga penentuan koordinat untuk membuat garis-garisnya menjadi lebih mudah.

Sekarang dapatkan Kamu membuat objek seperti gambar berikut:

Membuat Garis Lengkung

Ada beberapa API untuk membuat garis lengkung, diantaranya arc() seperti yang sudah kita gunakan di awal, bezierCurveTo() dan arcTo().

bezierCurveTo()

Method ini menggunakan 4 buat titik, dua titik sebagai titik awal dan akhir kurva, dan dua titik sebagai control untuk melengkungkan kurva.

Pada ilustrasi di atas, kita lihat ada 4 buah titik. Titik 20,20 adalah titik awal garis, dan 200,20 adalah titik akhir garis. Adapun titik 20,100 dan titik 200,100 menjadi titik kontrol yang menarik garis kurva seperti magnet. Untuk membuat garis seperti di atas, kita buat kode program seperti berikut:

var curve = canvas.getContext("2d");
curve.beginPath();
curve.moveTo(20,20);
curve.bezierCurveTo(20,100, 200,100, 200,20);

curve.lineWidth = 5;
curve.strokeStyle = "yellow";
curve.stroke();

Kita menggunakan method moveTo() untuk memulai titik. Kemudian method bezierCurveTo() menerima 6 buah parameter, dengan parameter 1 dan 2 untuk titik control pertama, parameter 3 dan 4 untuk titik control kedua, dan dua parameter terakhir untuk titik akhir garis. Hasilnya dapat dilihat pada gambar berikut:

quadraticCurveTo()

Mirip method bezierCurveTo(), method quadraticCurveTo() membuat garis kurva dengan memanfaatkan titik kontrol. Hanya saja titik kontrol yang digunakan hanya satu.

Untuk membuat garis kurva seperti gambar di atas, kita tulis kode seperti berikut:

var curve = canvas.getContext("2d");
curve.beginPath();
curve.moveTo(20,20);
curve.quadraticCurveTo(20,100, 200,20);

curve.lineWidth = 5;
curve.strokeStyle = "yellow";
curve.stroke();

Hasilnya seperti dapat kita lihat pada gambar berikut:

arcTo()

Method actTo() membuat garis lengkung sepanjang seperempat lingkaran dari dua titik tangen. Lebih jelasnya lihat ilustrasi gambar berikut:

Untuk membuat garis seperti di atas, kita tulis kode seperti berikut:

var curve = canvas.getContext("2d");
curve.beginPath();
curve.moveTo(20,20);
curve.lineTo(100,20);
curve.arcTo(150,20, 150,70, 50);
curve.lineTo(150,120);

curve.strokeStyle = "yellow";
curve.lineWidth = 5;
curve.stroke();

Method arcTo() menerima 5 parameter. Parameter 1 dan 2 untuk titik x1,y1. Parameter 3 dan 4 untuk titik x2,y2. Parameter terakhir untuk panjang radius lingkaran. Bila kita jalankan kode di atas hasilnya sama seperti ilustrasi di atas:

Memanipulasi Posisi, Rotasi, dan Skala

translate()

Method ini kita gunakan untuk menggeser canvas ke koordinat tertentu. Perhatikan kode berikut:

var rect = canvas.getContext("2d");
rect.fillStyle = "yellow";
rect.fillRect(10,10,100,100);
rect.translate(150,80);
rect.fillRect(10,10,100,100);

Hasil dari kode di atas adalah seperti berikut:

Perhatikan bahwa method translate() berlaku sebelum pembuatan gambar. Method ini hanya berlaku untuk fillRect() yang kedua dan tidak yang pertama.

rotate()

Method rotate() digunakan untuk memutar canvas sehingga objek yang ada didalamnya ikut berputar. Perhatikan kode berikut:

var rect = canvas.getContext("2d");
rect.fillStyle = "yellow";
// kotak pertama          
rect.fillRect(10, 10, 100, 10);
rect.rotate(45 * Math.PI/180);
//kotak kedua
rect.fillRect(10,10,100,10);
rect.rotate(-45 * Math.PI/180);
// kotak ketiga
rect.fillRect(150, 10, 100, 10);

Hasil dari kode di atas seperti berikut:

Kotak yang pertama dibuat adalah kotak mendatar yang ada paling kiri atas. Kotak kedua adalah kotak yang miring, karena sebelum kotak dibuat, terlebih dulu kita memanggil method rotate() dengan nilai 45 derajat. Kotak ketiga adalah kotak mendatar sebelah kanan. Kotak ketiga tidak miring seperti kotak kedua karena kita sebelumnya telah memutar kembali canvas ke -45 derajat. Perhatikan bahwa nilai rotate adalah nilai dalam radian. Bila kita ingin memasukkan nilai dalam derajat, maka kalikan nilai derajat yang diinginkan dengan Math.PI/180.

scale()

Method ini mengubah skala nilai dari hitungan sebelumnya. Perhatikan kode berikut:

var rect = canvas.getContext("2d");
rect.strokeStyle = "yellow";
rect.lineWidth = 3;
rect.strokeRect(10, 10, 100, 100);
rect.scale(2, 2);
rect.strokeRect(10, 10, 100, 100);

Hasil dari kode di atas seperti gambar berikut:

Kode di atas menghasilkan dua buah persegi dan persegi kedua skalanya naik dua kali lipat secara vertikal dan horizontal. Perhatikan pula bahwa yang meningkat dua kali lipat tidak hanya ukuran persegi, tapi juga lebar garis dan jarak dari titik koordinat 0,0.