Slice an Image

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

<!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');
      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 ရဲ႕ parmater ကေတာ့

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 ပံုရဲ႕ အျမင့္ပါ

results matching ""

    No results matching ""