Add Text

Canvas ဟာ ပံုဆြဲရံုသာမက စာေတြ ပါထည့္လို႕ရပါတယ္။ စာထည့္ဖုိ႕အတြက္ font family , size စတာေတြလိုပါတယ္။ ျပီးတဲ့ အခါမွာ fillText နဲ႕ စာ ကို canvas ထဲကို ထည့္ရပါတယ္။

<!DOCTYPE HTML>
<html>
  <head>
    <title>Canvas</title>
    <style>
    canvas#myCanvas {border: 1px solid gray;}
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="300" height="300"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var ctx = canvas.getContext('2d');
      //filled text
      ctx.fillStyle = "red";
      ctx.font = '40px "times new roman"'
      ctx.fillText('Hello World',50,150);
    </script>
  </body>
</html>

code ကေတာ့ ရွင္းရွင္းေလးပါ။ စာလံုး အနီေရာင္ သံုးတယ္။ font size က 40px ျဖစ္ျပီးေတာ့ font family ကေတာ့ times new roman ပါ။ ျပီးေတာ့ Hello World ဆိုတဲ့ စာလံုးကို x ၅၀ ၊ y ၁၅၀ တုိ႕မွာ ထည့္လိုက္ပါတယ္။

Figure 11-12

Figure 11-12

ထပ္ျပီးေတာ့ color မျဖည့္ပဲ stroke နဲ႕ စာထည့္ၾကည့္ရေအာင္။

<!DOCTYPE HTML>
<html>
  <head>
    <title>Canvas</title>
    <style>
    canvas#myCanvas {border: 1px solid gray;}
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="300" height="300"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var ctx = canvas.getContext('2d');
      //filled text
      ctx.fillStyle = "red";
      ctx.font = '40px "times new roman"'
      ctx.fillText('Hello World',50,150);

      //outline text
      ctx.strokeStyle = 'blue';
      ctx.font = '30px "arial"';
      ctx.strokeText('Stroke',50,200);
    </script>
  </body>
</html>

အဲဒီ အခါ browser မွာ ေအာက္ကလို ေပၚပါလိမ့္မယ္။

Figure 11-13

Figure 11-13

တကယ္လုိ႕ လက္ရိွ text မွာ stroke ထည့္ခ်င္ရင္ x နဲ႕ y postion ကို အတူတူေပးလိုက္ရင္ ရပါတယ္။

<!DOCTYPE HTML>
<html>
  <head>
    <title>Canvas</title>
    <style>
    canvas#myCanvas {border: 1px solid gray;}
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="300" height="300"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var ctx = canvas.getContext('2d');
      //filled text
      ctx.fillStyle = "red";

      ctx.font = '40px "times new roman"'
      ctx.fillText('Hello World',50,150);

      //outline text
      ctx.strokeStyle = 'black';
      ctx.lineWidth = 2;
      ctx.strokeText('Hello World',50,150);
    </script>
  </body>
</html>

အခု code မွာဆုိရင္ stroke width ကို 2 px ေပးထားပါတယ္။

Figure 11-14

Figure 11-14

တကယ္လုိ႕ bold , italic စတာေတြ ထည့္ခ်င္ရင္ေတာ့ font မွာ ထည့္လို႕ရပါတယ္။

ctx.font = 'italic bold 44px "Times New Roman"';

textalign ထည့္မယ္ဆုိရင္ေတာ့

ctx.textAlign='center';

ဆုိျပီး ထည့္လို႕ရပါတယ္။ textAlign ေတြကေတာ့ left,center​ , right တုိ႕ပဲ ျဖစ္ပါတယ္။

results matching ""

    No results matching ""