WebGL - Ikhtisar Kanvas Html5

Untuk membuat aplikasi grafis di web, HTML-5 menyediakan serangkaian fitur yang kaya seperti Canvas 2D, WebGL, SVG, transformasi 3D CSS, dan SMIL. Untuk menulis aplikasi WebGL, kami menggunakan elemen kanvas HTML-5 yang sudah ada. Bab ini memberikan gambaran umum tentang elemen kanvas HTML-5 2D.

Kanvas HTML5

HTML-5 <canvas>menyediakan opsi yang mudah dan kuat untuk menggambar grafik menggunakan JavaScript. Ini dapat digunakan untuk menggambar grafik, membuat komposisi foto, atau melakukan animasi sederhana (dan tidak sesederhana itu).

Ini sederhana <canvas> elemen yang hanya memiliki dua atribut tertentu width dan height ditambah semua atribut inti HTML-5 seperti id, name, dan class.

Sintaksis

Sintaks dari tag kanvas HTML diberikan di bawah ini. Anda harus menyebutkan nama kanvas di dalam tanda kutip ganda ("").

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

Atribut Kanvas

Tag kanvas memiliki tiga atribut yaitu, id, width, dan height.

Id- Id mewakili pengenal elemen kanvas dalam Model Objek Dokumen (DOM) .
Width - Lebar mewakili lebar kanvas.
Height - Tinggi mewakili tinggi kanvas.

Atribut ini menentukan ukuran kanvas. Jika seorang programmer tidak menentukannya di bawah tag kanvas, maka browser seperti Firefox, Chrome, dan Web Kit, secara default, menyediakan elemen kanvas berukuran 300 × 150.

Contoh - Buat Kanvas

Kode berikut menunjukkan cara membuat kanvas. Kami telah menggunakan CSS untuk memberi batas berwarna ke kanvas.

<html>
   <head>
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

Saat menjalankan, kode di atas akan menghasilkan output berikut -

Konteks Rendering

<canvas> awalnya kosong. Untuk menampilkan sesuatu pada elemen kanvas, kita harus menggunakan bahasa scripting. Bahasa skrip ini harus mengakses konteks rendering dan menggambar di atasnya.

Elemen kanvas memiliki metode DOM yang disebut getContext(), yang digunakan untuk mendapatkan konteks rendering dan fungsi gambarnya. Metode ini mengambil satu parameter, yaitu tipe konteks2d.

Kode berikut harus ditulis untuk mendapatkan konteks yang diperlukan. Anda dapat menulis skrip ini di dalam tag body seperti yang ditunjukkan di bawah ini.

<!DOCTYPE HTML>
<html>
   <body>
      <canvas id = "mycanvas" width = "600" height = "200"></canvas>

      <script>
         var canvas = document.getElementById('mycanvas');
         var context = canvas.getContext('2d');
			
         context.font = '20pt Calibri';
         context.fillStyle = 'green';
         context.fillText('Welcome to Tutorialspoint', 70, 70);
      </script>
   </body>
</html>

Saat menjalankan, kode di atas akan menghasilkan output berikut -

Untuk contoh lebih lanjut tentang HTML-5 2D Canvas, lihat link berikut HTML-5 Canvas .

Konteks WebGL

HTML5 Canvas juga digunakan untuk menulis aplikasi WebGL. Untuk membuat konteks rendering WebGL pada elemen kanvas, Anda harus meneruskan stringexperimental-webgl, dari pada 2d ke canvas.getContext()metode. Beberapa browser hanya mendukung 'webgl'.

<!DOCTYPE html>
<html>
   <canvas id = 'my_canvas'></canvas>
	
   <script>
      var canvas = document.getElementById('my_canvas');
      var gl = canvas.getContext('experimental-webgl');
      gl.clearColor(0.9,0.9,0.8,1);
      gl.clear(gl.COLOR_BUFFER_BIT);
   </script>
</html>

Saat menjalankan, kode di atas akan menghasilkan output berikut -