Animate Canvas Content
ကၽြန္ေတာ္တုိ႕ေတြ canvas မွာ ပံုဆြဲ ရံုသာမက animation ေတြ ပါထည့္လို႕ရပါတယ္။ animation လုပ္တဲ့ အခါမွာ canvas ကို beginPath() နဲ႕ clear လုပ္ျပီး ပံုေတြ ထပ္ဆြဲတာပါ။
ကၽြန္ေတာ္တုိ႕ေတြ ေဘာလံုးေလးကို အလ်ားလိုက္ ေပးေစခ်င္တယ္။ ေဘာင္နဲ႕ ရိုက္ရင္ ျပန္လွည့္လာမယ့္ ပံုစံမ်ဳိးလုပ္ခ်င္တယ္။
Figure 11-21
အဲဒီ အတြက္ ကၽြန္ေတာ္ တုိ႕ေတြ JavaScript ေရးရပါမယ္။
code ကေတာ့ နည္းနည္းေလး ရည္ပါတယ္။ တခ်က္ၾကည့္လိုက္ပါ။
<!DOCTYPE HTML>
<html>
<head>
<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 posotion ေျပာင္းဖုိ႕ပါ။
ဒီ chapter မွာ ကၽြန္ေတာ့္ အေနနဲ႕ canvas တစ္ခုလံုးကို အေသးစိတ္ မေရးႏိုင္ေပမယ့္ အတတ္ႏိုင္ဆံုး အကုန္လံုးကို ျခံဳမိေအာင္ ေရးသားထားပါတယ္။ ဒါေၾကာင့္ စေလ့လာမယ့္ သူေတြ အတြက္ အဆင္ေျပမယ္လုိ႕ ေမွ်ာ္လင့္ပါတယ္။