WebGL - Html5 Canvas'a Genel Bakış

Web üzerinde grafik uygulamaları oluşturmak için HTML-5, 2D Canvas, WebGL, SVG, 3D CSS dönüşümleri ve SMIL gibi zengin bir özellik kümesi sağlar. WebGL uygulamaları yazmak için HTML-5'in mevcut tuval öğesini kullanıyoruz. Bu bölüm, HTML-5 2D kanvas öğesine genel bir bakış sağlar.

HTML5 Canvas

HTML-5 <canvas>JavaScript kullanarak grafik çizmek için kolay ve güçlü bir seçenek sunar. Grafikler çizmek, fotoğraf kompozisyonları yapmak veya basit (ve o kadar basit olmayan) animasyonlar yapmak için kullanılabilir.

İşte basit <canvas> sadece iki özel niteliğe sahip eleman width ve height artı kimlik, ad ve sınıf gibi tüm temel HTML-5 özellikleri.

Sözdizimi

HTML canvas etiketinin sözdizimi aşağıda verilmiştir. Tuvalin adını çift alıntılar ("") içinde belirtmelisiniz.

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

Tuval Özellikleri

Canvas etiketinin id, width ve height olmak üzere üç niteliği vardır.

Id- Kimlik, Belge Nesne Modeli'ndeki (DOM) tuval öğesinin tanımlayıcısını temsil eder .
Width - Genişlik, tuvalin genişliğini temsil eder.
Height - Yükseklik, tuvalin yüksekliğini temsil eder.

Bu özellikler, tuvalin boyutunu belirler. Bir programcı bunları tuval etiketi altında belirtmiyorsa, Firefox, Chrome ve Web Kit gibi tarayıcılar varsayılan olarak 300 × 150 boyutunda bir tuval öğesi sağlar.

Örnek - Bir Tuval Oluşturma

Aşağıdaki kod, bir tuvalin nasıl oluşturulacağını gösterir. Tuvale renkli bir sınır vermek için CSS kullandık.

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

Yürütüldüğünde, yukarıdaki kod aşağıdaki çıktıyı üretecektir -

Görüntü Oluşturma Bağlamı

<canvas> başlangıçta boştur. Tuval öğesinde bir şey görüntülemek için bir betik dili kullanmalıyız. Bu komut dosyası dili oluşturma bağlamına erişmeli ve onu kullanmalıdır.

Kanvas öğesinin adında bir DOM yöntemi vardır. getContext(), oluşturma bağlamını ve çizim işlevlerini elde etmek için kullanılır. Bu yöntem, bağlam türü olan bir parametre alır.2d.

Aşağıdaki kod, gerekli içeriği elde etmek için yazılmalıdır. Bu betiği aşağıda gösterildiği gibi body etiketinin içine yazabilirsiniz.

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

Yürütüldüğünde, yukarıdaki kod aşağıdaki çıktıyı üretecektir -

HTML-5 2D Canvas hakkında daha fazla örnek için aşağıdaki HTML-5 Canvas bağlantısına bakın .

WebGL Bağlamı

HTML5 Canvas, WebGL uygulamaları yazmak için de kullanılır. Tuval öğesinde bir WebGL oluşturma bağlamı oluşturmak için dizeyi iletmelisinizexperimental-webgl, onun yerine 2d için canvas.getContext()yöntem. Bazı tarayıcılar yalnızca '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>

Yürütüldüğünde, yukarıdaki kod aşağıdaki çıktıyı üretecektir -