Drawing with the Canvas Element

ပုံတွေ လိုင်းတွေကို web page ပေါ်မှာ ဆွဲချင်သလား ? Modern HTML မှာ canvas ပါဝင်ပါတယ်။ canvas က image editors အနေနဲ့ အသုံးချလို့ရသလို ပုံတွေကိုလည်း JavaScript အသုံးပြုပြီး ဆွဲနိုင်ပါတယ်။

Understanding Canvases

Modern HTML မှာ <canvas> tag ဟာ web page ပေါ်မှာ ပုံဆွဲဖို့အတွက် နေရာတစ်ခု ဖန်တီးပေးပါတယ်။ အဲဒီ အပေါ်မှာ shapes, lines တွေ အပြင် စာတွေ ပုံတွေ ထည့်သွင်းလို့ရပါတယ်။ Canvas ကို JavaScript နဲ့ တွဲပြီး အသုံးပြုရပါတယ်။ နောက်ပြီးတော့ coordinates အကြောင်းကိုလည်း အနည်းငယ် နားလည်ထားမှသာ လိုချင်တဲ့ နေရာမှာ ပုံပေါ်အောင် ဆွဲလို့ရပါလိမ့်မယ်။

<canvas> tag ကို အသုံးပြုတဲ့အခါမှာ width နဲ့ height attributes ကို လည်း ကြေငြာခဲ့ဖို့လိုပါတယ်။ နောက်ပြီး id attribute ကို ထည့်သွင်းဖို့လိုပါတယ်။ ဒါမှ JavaScript ကနေ canvas ပေါ်မှာ ပုံဆွဲလို့ ရပါလိမ့်မယ်။

JavaScript လိုအပ်တာကြောင့် ပြီးခဲ့တဲ့ အခန်းက ပြောထားခဲ့သလို <script> tag အသုံးပြုဖို့လိုပါတယ်။ ဒါမှမဟုတ် external .js file မှာ ဖြစ်ဖြစ် code ရေးပြီးတော့ canvas ပေါ်မှာ ပုံဆွဲလို့ရပါတယ်။ JavaScript ကနေ canvas ကို ပြီးခဲ့တဲ့ chapter မှာ အသုံးပြုခဲ့သလို getElementById နဲ့ ပဲ ခေါ်သုံးရပါလိမ့်မယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
  <style>
  canvas#sample {border: 1px solid gray;}
  </style>
</head>
<body>
  <canvas id="sample" width="600" height="400"></canvas>
  <script>
  var cnv = document.getElementById('sample');
  var ctx = cnv.getContext('2d');
  ctx.strokeStyle = 'green';
  ctx.lineWidth = '15';
  ctx.strokeRect(160,80,360,240);
  </script>
</body>
</html>

canvas အတွက် အထက်ပါ code လေးကို လေ့လာကြည့်ရအောင်။ ကျွန်တော်တို့တွေ HTML မှာ canvas တစ်ခု ဆောက်ထားပါတယ်။ width ကတော့ 600px နဲ့ height ကတော့ 400px ပါ။ CSS နဲ့ canvas ကို ခဲရောင် ဘောင်ခတ်ထားပါတယ်။ JavaScript မှာတော့ cnv ထဲကို document.getElementById('sample'); ကို အသုံးပြုပြီး canvas object ကို ယူလိုက်ပါတယ်။ canvas object ဖြစ်တဲ့ cnv ကနေ cnv.getContext('2d'); နဲ့ context ကို ရလာပါတယ်။ ကျွန်တော်တို့ context ရလာပြီးတဲ့အခါမှာတော့ ဘာ ဆွဲမလဲ ။ ဘယ်လို ဆွဲမလဲ စတာတွေကို ထည့်သွင်းရပါတယ်။ အခု code မှာတော့ အစိမ်းရောင် စတုဂံကို x position 160 နဲ့ y position 80 မှာ ဆွဲမယ်လို့ ဆိုထားပါတယ်။ width ကတော့ 360 နဲ့ height ကတော့ 240 ပါ။ အဲဒီ code ဟာ browser မှာ ဆိုရင် အောက်ကလို အစိမ်းရောင် စတုဂံကို မြင်ရပါလိမ့်မယ်။

Figure 11-1

Figure 11-1

Set Up a Canvas

ကျွန်တော်တို့ canvas ဖန်တီးဖို့အတွက် HTML မှာ <canvas> tag ကို ထည့်ပါမယ်။

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Canvas</title>
</head>
<body>
  <canvas></canvas>
</body>
</html>

ဒီ code ကို browser မှာ ဖွင့်ရင်တော့ ဘာမှ မြင်ရမှာ မဟုတ်ပါဘူး။ ကျွန်တော်တို့ canvas ကို မြင်ရအောင် canvas ကို css သုံးပြီး border ထည့်ပါမယ်။

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Canvas</title>
 <style>
 canvas#sample {border: 1px solid gray;}
 </style>
</head>
<body>
  <canvas id="sample" width="600" height="400"></canvas>
</body>
</html>

ကျွန်တော်တို့ border ထည့်ထားတာကြောင့် အဖြူရောင် page မဟုတ်တော့ပဲ canvas ရှိတဲ့ နေရာမှာ ဘောင်ခတ်ထားတာကို တွေ့နိုင်ပါတယ်။

Figure 11-2

Figure 11-2

ကျွန်တော်တို့ canvas ဖန်တီးပြီးသွားရင်တော့ canvas ပေါ်မှာ ပုံတွေ စပြီး ဆွဲလို့ရပါပြီ။

Draw Rectangles

ကျွန်တော်တို့တွေ အခု စတုဂံ ပုံလေး တစ်ခုဆွဲကြည့်ရအောင်။ စတုဂံ ပုံဆွဲတဲ့ အခါမှာ ကျွန်တော်တို့ တွေ အနေနဲ့ context တစ်ခု ဖန်တီးဖို့ လိုပါတယ်။ ပြီးတဲ့အခါ ပုံဆွဲဖို့အတွက် x နဲ့ y ကို သိဖို့ လိုပါတယ်။ x ဆိုတာကတော့ ဘယ်ဘက်ကနေ အကွာ အဝေးပါ။ y ကတော့ ထိပ် ကနေ အကွာ အဝေးပါ။ x,y က 0,0 ဆိုရင်တော့ ဘယ်ဘက် အပေါ်ထိပ်ဆုံးကို ပေါ်တာပါ။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
  <style>
  canvas#sample {border: 1px solid gray;}
  </style>
</head>
<body>
  <canvas id="sample" width="600" height="400"></canvas>
  
  <script>
  var cnv = document.getElementById('sample');
  var ctx = cnv.getContext('2d');
  ctx.fillStyle = 'orange';
  ctx.fillRect(10,10,200,100);
  </script>
</body>
</html>

ဒီ code မှာဆိုရင်တော့ x က 10 နဲ့ y 10 ကို အသုံးပြုထားပါတယ်။ width ကတော့ ၂၀၀ ဖြစ်ပြီးတော့ height ကတော့ ၁၀၀ ကို အသုံးပြုထားတယ်။

ctx.fillStyle = 'orange';
ctx.fillRect(10,10,200,100);

fill style ကတော့ လိမ္မော်ရောင်ကို အသုံးပြုထားပြီးတော့ fillRect နဲ့ လိမ္မော်ရောင် ခြယ်ထားတဲ့ စတုဂံတစ်ခုကို ဖန်တီးထားပါတယ်။

Figure 11-3

Figure 11-3

Stock ဆွဲချင်ရင်တော့ strokeStyle , lineWidth လိုပါတယ်။ ပြီးရင် strokeRect ဆွဲရပါတယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
  <style>
  canvas#sample {border: 1px solid gray;}
  </style>
</head>
<body>
  <canvas id="sample" width="600" height="400"></canvas>
  <script>
  var cnv = document.getElementById('sample');
  var ctx = cnv.getContext('2d');
  ctx.fillStyle = 'orange';
  ctx.fillRect(10,10,200,100);
  ctx.strokeStyle = 'blue';
  ctx.lineWidth = '10';
  ctx.strokeRect(360,120,200,240);
  </script>
</body>
</html>

အခု code မှာ ဆိုရင် ကျွန်တော်တို့တွေ stroke တစ်ခုနဲ့ စတုဂံ ဆွဲထားပါတယ်။

Figure 11-4

Figure 11-4

တကယ်လို့ စတုဂံမှာ အပေါက်လုပ်စေချင်ရင်တော့ clearRect ကို အသုံးပြုလို့ရပါတယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
  <style>
  canvas#sample {border: 1px solid gray;}
  </style>
</head>
<body>
  <canvas id="sample" width="600" height="400"></canvas>
  <script>
  var cnv = document.getElementById('sample');
  var ctx = cnv.getContext('2d');
  ctx.fillStyle = 'orange';
  ctx.fillRect(10,10,200,100);
  ctx.strokeStyle = 'blue';
  ctx.lineWidth = '10';
  ctx.strokeRect(360,120,200,240);
  ctx.clearRect (30,20,150,50);
  </script>
</body>
</html>

အခု code မှာ ဆိုရင် x 30 နဲ့ y 20 မှာ width 150 , height 50 ရှိတဲ့ အပေါက် ဖြစ်နေတာကို တွေ့ရပါမယ်။

Figure 11-5

Figure 11-5

Draw Circles

ကျွန်တော်တို့ canvas မှာ စတုဂံသာမက စက်ဝိုင်းလည်း ဆွဲလို့ရပါတယ်။ စက်ဝိုင်း ရဲ့ coordinate ဟာ အလယ်ကနေ ဆွဲပါတယ်။ radius ကို အသုံးပြုပြီးတော့ စက်ဝိုင်းအရွယ်အစား ဖန်တီးရပါတယ်။ စက်ဝိုင်းဆွဲရာမှာ radians ကို ပဲ ဆွဲပေးပါတယ်။ ဒါကြောင့် စက်ဝိုင်းအပြည့်အတွက် ဆိုရင် 2 PI လိုပါတယ်။ စက်ဝိုင်း တစ်ဝက်သာဆိုရင်တော့ PI ကို အသုံးပြုရပါမယ်။

Figure 11-6

Figure 11-6

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <style>
    canvas#myCanvas {border: 1px solid gray;}
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#FF0000';
      context.stroke();
    </script>
  </body>
</html>

ဒီ code မှာ အစိမ်းရောင် ခြယ်ထားပြီး ဘောင်ကို အနီရောင်ခြယ်ထားတဲ့ စက်ဝိုင်း တစ်ခုကို browser မှာ တွေ့ရပါလိမ့်မယ်။

Figure 11-7

Figure 11-7

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

ဆိုတာကတော့

context.arc(x,y,radius,start_Angle,end_Angle,counterclockwise);

ပုံမှာ angle သုည က စထားပြီးတော့ စက်ဝိုင်းအပြည့်ဆွဲထားပါတယ်။ စက်ဝိုင်းကို နာရီလက်တံ အတိုင်း ဆွဲထားပါတယ်။ တကယ်လို့ နာရီလက်တံ ပြောင်းပြန်ဆွဲလိုရင်တော့ နောက်ဆုံး parameter false အစား true ပေးဖို့လိုပါတယ်။

တကယ်လို့ code ကို 2 PI အစား PI ပဲ သုံးရင် စက်ဝိုင်းက တစ်ဝက်ပဲ ဖြစ်နေပါလိမ့်မယ်။

context.arc(centerX, centerY, radius, 0,  Math.PI, false);

Figure 11-8

Figure 11-8

Draw Lines

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <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>
    <meta charset="UTF-8">
    <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>
    <meta charset="UTF-8">
    <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);

Add Text

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <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>
    <meta charset="UTF-8">
    <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>
    <meta charset="UTF-8">
    <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 တို့ပဲ ဖြစ်ပါတယ်။

Add an Image

Canvas မှာ ကျွန်တော်တို့ ဓာတ်ပုံတွေပါ ထည့်လို့ရပါတယ်။ ဓာတ်ပုံနဲ့ canvas မှာ ဆွဲထားတဲ့ ပုံတွေ ပြောင်းပြီး အသုံးပြုလို့ရပါတယ်။ image ကို အသုံးပြုရာမှာ အခြား canvas drawing နဲ့ မတူတာကတော့ အရင်ဆုံး image ကို load လုပ်ရပါတယ်။ load ပြီးမှသာ canvas ပေါ်မှာ image ကို ဆွဲလိုက်ပါတယ်။

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <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');
      var pic = new Image();
      pic.src = 'house.jpg';
      pic.onload = function () {
        ctx.drawImage(pic,10,10);
      }
    </script>
  </body>
</html>

ဒီ code မှာ ဆိုရင် house.jpg ကို image object နဲ့ ခေါ်လိုက်ပါတယ်။ load ပြီးသွားတဲ့ အခါမှသာ ctx.drawImage နဲ့ x 10 ၊ y 10 နေရာမှာ ဆွဲလိုက်ပါတယ်။

Figure 11-15

Figure 11-15

တကယ်လို့ ပုံ အရွယ်အစားကို ပြင်ချင်ရင်တော့ drawImage မှာ width နဲ့ height parameter ထပ်ဖြည့်လို့ရပါတယ်။

ctx.drawImage(pic,10,10,pic.width*0.5,pic.height*0.5);

Image object ရဲ့ အရွယ်အစားလိုချင်ရင်တော့ width နဲ့ height property ကနေ ရနိုင်ပါတယ်။ အခု ဥပမာဟာ ပုံမှန် image အရွယ်အစားရဲ့ တဝက်ကို ချုံ့လိုက်တာပါ။

Figure 11-16

Figure 11-16

Slice an Image

ပုံဖြတ်တာကတော့ ပုံထည့်တာနဲ့ သိပ်မကွာပါဘူး။ သို့ပေမယ့် parameter တွေ ကွာသွားပါတယ်။

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <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');
      var pic = new Image();
      pic.src = 'house.jpg';
      pic.onload = function () {
        ctx.drawImage(pic,18,100,80,35,0,0,80,35);
      }
    </script>
  </body>
</html>

ဆိုတဲ့ code လေးဟာ အောက်ကလို ပေါ်ပါလိမ့်မယ်။

Figure 11-16

Figure 11-17

drawImage ရဲ့ parameter ကတော့

ctx.drawImage(imageObject,startCropPointX,startCropPointY,cropWidth,cropHeight,xPos,yPos,width,height);
Parameter Description
imageObject JavaScript image object ပါ
startCropPointX စပြီးဖြတ်ချင်တဲ့ အမှတ် x point ပါ
startCropPointY စပြီးဖြတ်ချင်တဲ့ အမှတ် y point ပါ
cropWidth ဖြတ်မှတ် x,y point ကနေ ဖြတ်မယ့် အကျယ်ပါ
cropHeight ဖြတ်မှတ် x,y point ကနေ ဖြတ်မယ့် အမြင့်ပါ
xPos ပုံဖြတ်ပြီးတဲ့ အခါ canvas ပေါ်မှာ ပေါ်မယ့် x အမှတ်ပါ
yPos ပုံဖြတ်ပြီးတဲ့ အခါ canvas ပေါ်မှာ ပေါ်မယ့် y အမှတ်ပါ
width ပုံရဲ့ အကျယ်ပါ
height ပုံရဲ့ အမြင့်ပါ

Add a Gradient

Gradient ဆိုတာကတော့ အရောင် တစ်ခုကနေ နောက် အရောင်တစ်ခုကို သန်းပြီး ပြောင်းသွားတဲ့ အရောင်ပါ။ gradient ကို ပုံတွေ ဆွဲသည့် အခါမှာ ထည့်သုံးကြတာကို တွေ့မိမှာပါ။

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <style>
    canvas#myCanvas {border: 1px solid gray;}
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="600" height="400"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var ctx = canvas.getContext('2d');
      var grd = ctx.createLinearGradient(0,0,0,400);

      grd.addColorStop(0,"yellow");
      grd.addColorStop(0.5,"orange");
      grd.addColorStop(1,"red");
      
      ctx.fillStyle = grd;
      ctx.fillRect(0,0,600,400);
    </script>
  </body>
</html>

gradient အတွက် code က နည်းနည်းများပါတယ်။ ပထမဆုံး createLinearGradient နဲ့ စမှတ် နဲ့ ဆုံးမှတ်ကို သတ်မှတ်ပါတယ်။ ကျွန်တော်တို့ဟာ 600,400 ရှိတဲ့ စတုဂံကို ဆွဲမှာ ဖြစ်ပြီးတော့ အဲဒီ စတုဂံကို gradient အရောင် ခြယ်ပါမှာ။ gradient ကို စမှတ် 0,0 ကနေ 0, 400 အထိ ဆွဲလိုက်ပါတယ်။ ဒါကြောင့် အရောင်ခြယ်တဲ့ အခါမှာ ဒေါင်လိုက် gradient ဖြစ်နေပါမယ်။

ပြီးတဲ့ အခါမှာတော့ အဝါရောင်ကို စမှတ် ထားလိုက်တယ်။ ပြီးတော့ လိမ္မော်ရောင်ကို တဝက်မှာ ထားပြီးတော့ အဆုံးမှာ အနီရောင်ထားလိုက်ပါတယ်။ ပြီးတဲ့ စတုဂံဆွဲလိုက်ပါတယ်။ အဲဒီ အခါမှာတော့ အောက်ကလို ပုံရလာပါတယ်။

Figure 11-18

Figure 11-18

တကယ်လို့ စက်ဝိုင်းပုံစံ လိုချင်ရင်တော့ createRadialGradient ကို အသုံးပြုရပါတယ်။

var grd = ctx.createRadialGradient(300,200,10,300,200,360);

လို့ ပြင်လိုက်ရင် အောက်က ပုံမြင်ရပါမယ်။

Figure 11-19

Figure 11-19

စက်ဝိုင်းပုံစံ အတွက် createRadialGradient parameter ကတော့ 

ctx.createRadialGradient(x0,y0,r0,x1,y1,r1);
Parameter Description
x0 gradient ဆွဲဖို့ အတွက် x point စမှတ်
y0 gradient ဆွဲဖို့ အတွက် y point စမှတ်
r0 စက်ဝိုင်းရဲ့ အချင်း
x1 x-coordinate ဆုံးမှတ်
y1 y-coordinate ဆုံးမှတ်
r1 စက်ဝိုင်းရဲ့ ဆုံးမှတ် အခြင်း

Rotate Canvas Content

Canvas မှာ ထည့်ထားတဲ့ item တွေကို ကျွန်တော်တို့တွေ လှည့်လို့ရပါတယ်။ Canvas ထဲက Shapes တွေ images တွေ text တွေ အပြင် အခြား elements တွေကို လှည့်လို့ရပါတယ်။ rotate ဆိုတဲ့ function အတွက် radian ကို ပေးရပါတယ်။ အပြည့်လှည့်ချင်ရင်တော့ 2PI value ပေးရပါမယ်။ ဥပမာလေး ကြည့်ရအောင်။

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <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');
      var pic = new Image();
      pic.src = 'house.jpg';
      pic.onload = function () {
        ctx.rotate(10 * Math.PI/180);
        ctx.drawImage(pic,50,50);
      }
    </script>
  </body>
</html>

ဒီ code က ကျွန်တော်တို့ ပုံထည့်တဲ့ code နဲ့ အတူတူပါပဲ။ ကွာခြားချက်ကတော့ 

ctx.rotate(10 * Math.PI/180);

10 နေရာမှာ ကျွန်တော်တို့ လှည့်ချင်တဲ့ degree ထည့်လို့ရပါတယ်။ အနှုတ်တန်ဖိုးလည်း ထည့်လို့ရပါတယ်။ ကျွန်တော်တို့တွေ အနေနဲ့ ပုံတွေသာမက စာတွေ ကော ၊ စတုဂံပုံ စတာတွေကို ပါ rotate လုပ်လို့ရပါတယ်။

Figure 11-20

Figure 11-20

Animate Canvas Content

ကျွန်တော်တို့တွေ canvas မှာ ပုံဆွဲ ရုံသာမက animation တွေ ပါထည့်လို့ရပါတယ်။ animation လုပ်တဲ့ အခါမှာ canvas ကို beginPath() နဲ့ clear လုပ်ပြီး ပုံတွေ ထပ်ဆွဲတာပါ။

ကျွန်တော်တို့တွေ ဘောလုံးလေးကို အလျားလိုက် ပေးစေချင်တယ်။ ဘောင်နဲ့ ရိုက်ရင် ပြန်လှည့်လာမယ့် ပုံစံမျိုးလုပ်ချင်တယ်။

Figure 11-21

Figure 11-21

အဲဒီ အတွက် ကျွန်တော် တို့တွေ JavaScript ရေးရပါမယ်။

code ကတော့ နည်းနည်းလေး ရှည်ပါတယ်။ တချက်ကြည့်လိုက်ပါ။

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <style>
    canvas#myCanvas {border: 1px solid gray;}
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="600" height="400"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var ctx = canvas.getContext('2d');
     var x = 200;
     var y  = 200;
     var change = 4;
     var w = 600;
     var h = 400;
     
     function animate() {
       ctx.fillStyle = 'lightgray';
       ctx.fillRect(0,0,w,h);
       ctx.fillStyle='red';
       ctx.beginPath();
       ctx.arc(x,y,20,0,Math.PI*2,true);
       ctx.fill();
       
       if(x >= w || x <= 0) {
         change = - change;
       }
       x = x + change;
     }
     
     setInterval(animate,10);
    </script>
  </body>
</html>

ကျွန်တော်တို့တွေဟာ ဘောလုံးရဲ့ စမယ့် နေရာကို x,y variable ပေးထားပါတယ်။

var x = 200;
var y  = 200;

ပြီးတော့ ဘောလုံး ရဲ့ x position ကို တစ်ခါရွေ့လိုက်တိုင်း 4 pixel တိုးသွားစေချင်တော့ 

var change = 4;

ဆိုပြီးပေးထားတယ်။

canvas ရဲ့ အကျယ် နဲ့ အမြင့်အတွက်

var w = 600;
var h = 400;

10 milliseconds တိုင်းမှာ canvas ရဲ့ animation ကို ပြောင်းစေချင်တဲ့ အတွက်ကြောင့်

setInterval(animate,10);

ဆိုပြီး ရေးထားပါတယ်။ 10 milliseconds တိုင်းမှာ animate ဆိုတဲ့ function ကို ခေါ်ပါမယ်။

ctx.fillStyle = 'lightgray';
ctx.fillRect(0,0,w,h);

ကတော့ canvas ရဲ့ background ကို ခဲရောင် ထားလိုက်တာပါ။

 ctx.beginPath();

ကတော့ လက်ရှိ canvas မှာ အောက်မှာ ရှိတာတွေကို animate လုပ်တိုင်း clear လုပ်ပြီ းထပ်ထပ် ဆွဲပါလိမ့်မယ်။

ctx.arc(x,y,20,0,Math.PI*2,true);
ctx.fill();

ကတော့ စက်ဝိုင်း တစ်ခု ဆွဲလိုက်ပါတယ်။

if(x >= w || x <= 0) {
  change = - change;
}

စက်ဝိုင်းရဲ့ x ဟာ ဘောင်ရောက်သွားရင် ဒါမှမဟုတ် 0 ထက် နည်းသွားရင် position ပြောင်းလိုက်ပါတယ်။

x = x + change;

ကတော့ နောက်ထပ် animation အတွက် x position ပြောင်းဖို့ပါ။

ဒီ chapter မှာ ကျွန်တော့် အနေနဲ့ canvas တစ်ခုလုံးကို အသေးစိတ် မရေးနိုင်ပေမယ့် အတတ်နိုင်ဆုံး အကုန်လုံးကို ခြုံမိအောင် ရေးသားထားပါတယ်။ ဒါကြောင့် စလေ့လာမယ့် သူတွေ အတွက် အဆင်ပြေမယ်လို့ မျှော်လင့်ပါတယ်။