Son Haberler
Anasayfa / HTML5 Canvas Metin İnme Eğitimi

HTML5 Canvas Metin İnme Eğitimi

HTML5 Canvas kullanarak metnin kontur rengini ayarlamak için, bir renk dize, onaltılık bir değer veya RGB değeri tuval bağlamda strokeStyle özelliğini ayarlamak ve sonra inme metni strokeText () yöntemini kullanabilirsiniz.

Örnek:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="yazi" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('yazi');
      var context = canvas.getContext('2d');
      var x = 80;
      var y = 110;

      context.font = '60pt Calibri';
      context.lineWidth = 3;
      // stroke color
      context.strokeStyle = 'blue';
      context.strokeText('Merhaba Uzaylı!', x, y);
    </script>
  </body>
</html>

Önizleme:

Merhaba_uzayli_mavi

 

Not: HTML5 Canvas metin için dolgu ve kontur hem ayarlamak için, birlikte fillText() ve strokeText() yöntemlerini kullanmanız gerekir. İtaliksi iyi bir uygulama doğru inme kalınlığını vermek amacıyla strokeText() yöntemiyle önce fillText () yöntemini kullanın.