Draw Lines

မ်ဥ္းေၾကာင္းေတြ ဆြဲရင္ေတာ့ စမွတ္ အတြက္ moveTo ကို အသံုးျပဳျပီး ဆံုးမွတ္အတြက္ lineTo ကို အသံုးျပဳပါတယ္။ x နဲ႕ y အမွတ္ေတြကို parameter အျဖစ္ထည့္ေပးရပါမယ္။ ျပီးရင္ေတာ့ stroke() နဲ႕ မ်ဥ္းဆြဲလုိ႕ရပါျပီ။

<!DOCTYPE HTML>
<html>
  <head>
    <title>Canvas</title>
    <style>
    canvas#myCanvas {border: 1px solid gray;}
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="500"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.lineWidth = 5;
      context.strokeStyle = 'orange';
      context.moveTo(50,50);
      context.lineTo(50,360);
      context.stroke();
    </script>
  </body>
</html>

ဒီ code မွာဆုိရင္ မ်ဥ္းေၾကာင္းကို x ၅၀ y ၅၀ ကေန ျပီးေတာ့ x ၅၀ y ၃၆၀ အထိ ဆြဲထားပါတယ္။

Figure 11-9

Figure 11-9

ကၽြန္ေတာ္တုိ႕ ေနာက္ထပ္ မ်ဥ္း တစ္ေၾကာင္း ထပ္ျဖည့္ဆြဲၾကည့္ရေအာင္။

<!DOCTYPE HTML>
<html>
  <head>
    <title>Canvas</title>
    <style>
    canvas#myCanvas {border: 1px solid gray;}
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="500"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.lineWidth = 5;
      context.strokeStyle = 'orange';
      context.moveTo(50,50);
      context.lineTo(50,360);
      context.stroke();

      context.moveTo(50,50);
      context.lineTo(300,360);
      context.stroke();

    </script>
  </body>
</html>

စမွတ္ ကို ၅၀ , ၅၀ ျပန္ထားလိုက္တယ္။ ျပီးေတာ့ ၃၀၀ , ၃၆၀ ကို ဆြဲလိုက္တယ္။ ဒါေၾကာင့္ ပံုမွာ ျပထားတဲ့ ပံုအတိုင္း ျမင္ရပါလိမ့္မယ္။

Figure 11-10

Figure 11-10

တစ္ေၾကာင္း ဆြဲလိုက္ ျပန္ေရႊ႕လိုက္ မလိုက္ပဲနဲ႕ ပဲ ေတာက္ေလွ်ာက္ မ်ဥ္းေၾကာင္း ဆြဲသြားလုိ႕ရပါတယ္။

<!DOCTYPE HTML>
<html>
  <head>
    <title>Canvas</title>
    <style>
    canvas#myCanvas {border: 1px solid gray;}
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="500"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.lineWidth = 5;
      context.strokeStyle = 'orange';
      context.moveTo(50,50);
      context.lineTo(50,360);
      context.lineTo(300,360);
      context.lineTo(50,50);
      context.stroke();
    </script>
  </body>
</html>

ဒီ code မွာ ဆုိရင္ ပထမ ၅၀ , ၅၀ က စတယ္။ ျပီးေတာ့ ၅၀ , ၃၆၀ ကို ေရာက္တယ္။ အဲဒီ point ကေန ၃၀၀ , ၃၆၀ ကို လိုင္း ထပ္ဆြဲတယ္။ ျပီးေတာ့ ၃၀၀ , ၃၆၀ အမွတ္ကေန ၅၀ , ၅၀ ဆီ လိုင္းထပ္ဆြဲတယ္။ ဒါေၾကာင့္ ေအာက္ကလို ပံု ေပၚလာပါတယ္။

Figure 11-11

Figure 11-11

တကယ္လုိ႕ ျဖတ္ထားတဲ့ ပံုကို ၂ ဆၾကီးေစခ်င္ရင္ေတာ့ ေနာက္ဆံုး width နဲ႕ height မွာ သြားျပင္လို႕ရပါတယ္။

ဥပမာ။

ctx.drawImage(pic,18,100,80,35,0,0,80 * 2,35 * 2);

results matching ""

    No results matching ""