HTML5: <canvas> Kullanımı

HTML5: <canvas> Kullanımı birlikte öğrenelim.

HTML5 Yeniliklerini incelemekteyiz, bu yazımda etiketinin kullanımını ve ne amaçla hangi yöntemlerle kullanacağımızı öğrenelim.

Web çalışmalarımızda site içerisinde grafik,animasyon,geçişler hazırlayabileceğiniz HTML5 ve Javascript tabanlı web aracıdır. Bir çok tarayıcıda desteklememektedir, ilerki zamanlarda tam anlamıyla tüm büyük tarayıcılarda destekleyerek geliştiricilerin web sitelerinde kullanmaları mümkündür.

Bazı Mesleki Kullanım Alanları:
[list]
Harita
Animasyon
Matematik
Resim
[/list]

Canvas Çalışma Dosyası


<!DOCTYPE HTML>

<html>

  <head></head>

<body>

  <canvas id="deneme" width="578" height="200"></canvas>

  <script>

    var canvas = document.getElementById('deneme');

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



    // Bu alanda çalışmalarınızı gerçekleştireceksiniz.

  </script>

</body>



Örnek: Text

<!DOCTYPE HTML>

<html>

  <head>

    <style>

      body {

        margin: 100px auto; <!-- Yukardan 100px aşağı indiriyoz.-->

        padding: 0px;

        text-align: center; <!-- Sayfa İçerisinde Ortalıyoruz -->

      }

    </style>

    <meta charset="utf-8"> <!-- Türkçe Karekter.-->

  </head>

  <body>

  

    <canvas id="slogan" width="578" height="200"></canvas>

    <!-- Tablomuzun Yükseklik: width="578" Genişlik: height="200" olarak tanılmıyoruz. Tablo çizgileri eklemek için; style="border:1px solid;" -->

    

    <script>

      var canvas = document.getElementById('slogan'); // <canvas id=""> değerini veriyoruz.

      var context = canvas.getContext('2d'); // 2d olarak çiziyoruz.



      context.font = 'italic 25pt Calibri'; // Font özelliği.

      context.fillText('Sanalkurs Ne yapabileceğini göster!', 50, 100); // Sanalkurs yazısı Sağ - Sol:10 Yukarı - Aşağı:100

    </script>

  </body>

</html>




Örnek: Text [Renksiz] Slogan

<!DOCTYPE HTML>

<html>

  <head>

    <style>

      body {

        margin: 100px auto; <!-- Yukardan 100px aşağı indiriyoz.-->

        padding: 0px;

        text-align: center; <!-- Sayfa İçerisinde Ortalıyoruz -->

      }

    </style>

    <meta charset="utf-8"> <!-- Türkçe Karekter.-->

  </head>

  <body>

  

    <canvas id="slogan" width="578" height="200"></canvas>

    <!-- Tablomuzun Yükseklik: width="578" Genişlik: height="200" olarak tanılmıyoruz. Tablo çizgileri eklemek için; style="border:1px solid;" -->

    

    <script>

      var canvas = document.getElementById('slogan'); // <canvas id=""> değerini veriyoruz.

      var context = canvas.getContext('2d'); // 2d olarak çiziyoruz.



      context.font = 'italic 25pt Calibri'; // Font özelliği.

      context.fillText('Sanalkurs', 50, 100); // Sanalkurs yazısı Sağ - Sol:10 Yukarı - Aşağı:100

      context.fillText('Ne yapabileceğini göster!', 100, 130); //Ne yapabileceğini göster! yazısı Yukarı:150 Aşağı:100

    </script>

  </body>

</html>




Örnek: Text [Renkli] Slogan

<!DOCTYPE HTML>

<html>

  <head>

    <style>

      body {

        margin: 100px auto; <!-- Yukardan 100px aşağı indiriyoz.-->

        padding: 0px;

        text-align: center; <!-- Sayfa İçerisinde Ortalıyoruz -->

      }

    </style>

    <meta charset="utf-8"> <!-- Türkçe Karekter.-->

  </head>

  <body>

  

    <canvas id="slogan" width="578" height="200"></canvas>

    <!-- Tablomuzun Yükseklik: width="578" Genişlik: height="200" olarak tanılmıyoruz. Tablo çizgileri eklemek için; style="border:1px solid;" -->

    

    <script>

      var canvas = document.getElementById('slogan'); // <canvas id=""> değerini veriyoruz.

      var context = canvas.getContext('2d'); // 2d olarak çiziyoruz.



      context.font = 'italic 25pt Calibri'; // Font özelliği.

      context.fillStyle = 'blue'; // Sanalkurs Renk veriyoruz.

      context.fillText('Sanalkurs', 50, 100); // Sanalkurs yazısı Sağ - Sol:10 Yukarı - Aşağı:100

      context.fillStyle = 'red'; // Ne yapabileceğini göster! Renk veriyoruz.

      context.fillText('Ne yapabileceğini göster!', 100, 130); //Ne yapabileceğini göster! yazısı Yukarı:150 Aşağı:100

    </script>

  </body>

</html>



Günceldir.

Çalışmalarınızda Başarılar Dilerim

  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git