Rotate Canvas Content
Canvas မွာ ထည့္ထားတဲ့ item ေတြကို ကၽြန္ေတာ္တို႕ေတြ လွည့္လို႕ရပါတယ္။ Canvas ထဲက Shapes ေတြ images ေတြ text ေတြ အျပင္ အျခား elements ေတြကို လွည့္လို႕ရပါတယ္။ rotate ဆိုတဲ့ function အတြက္ radian ကို ေပးရပါတယ္။ အျပည့္လွည့္ခ်င္ရင္ေတာ့ 2PI value ေပးရပါမယ္။ ဥပမာေလး ၾကည့္ရေအာင္။
<!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.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