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