Understanding Canvases
HTML 5 မွာ <canvas> tag ဟာ web page ေပၚမွာ ပံုဆြဲဖုိ႕အတြက္ ေနရာတစ္ခု ဖန္တီးေပးပါတယ္။ အဲဒီ အေပၚမွာ shapes, lines ေတြ အျပင္ စာေတြ ပံုေတြ ထည့္သြင္းလို႕ရပါတယ္။ HTML 5 မွာ canvas ပါဝင္လာေပမယ့္ JavaScript နဲ႕ တြဲျပီး အသံုးျပဳရပါတယ္။ ေနာက္ျပီးေတာ့ coordinates အေၾကာင္းကိုလည္း အနည္းငယ္ နားလည္ထားမွသာ လိုခ်င္တဲ့ ေနရာမွာ ပံုေပၚေအာင္ ဆြဲလုိ႕ရပါလိမ့္မယ္။
<canvas> tag ကို အသံုးျပဳတဲ့အခါမွာ width နဲ႕ height attributes ကို လည္း ေၾကျငာခဲ့ဖုိ႕လိုပါတယ္။ ေနာက္ျပီး id attribute ကို ထည့္သြင္းဖို႕လိုပါတယ္။ ဒါမွ JavaScript ကေန canvas ေပၚမွာ ပံုဆြဲလုိ႕ ရပါလိမ့္မယ္။
JavaScript လိုအပ္တာေၾကာင့္ ျပီးခဲ့တဲ့ အခန္းက ေျပာထားခဲ့သလို <script> tag အသံုးျပဳဖုိ႕လိုပါတယ္။ ဒါမွမဟုတ္ external .js file မွာ ျဖစ္ျဖစ္ code ေရးျပီးေတာ့ canvas ေပၚမွာ ပံုဆြဲလုိ႕ရပါတယ္။ JavaScript ကေန canvas ကို ျပီးခဲ့တဲ့ chapter မွာ အသံုးျပဳခဲ့သလို getElemntById နဲ႕ ပဲ ေခၚသံုးရပါလိမ့္မယ္။
<!DOCTYPE html>
<html>
<head>
<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.getContext('2d'); နဲ႕ context ကို ရလာပါတယ္။ ကၽြန္ေတာ္တုိ႕ context ရလာျပီးတဲ့အခါမွာေတာ့ ဘာ ဆြဲမလဲ ။ ဘယ္လုိ ဆြဲမလဲ စတာေတြကို ထည့္သြင္းရပါတယ္။ အခု code မွာေတာ့ အစိမ္းေရာင္ စတုဂံကို x postion 160 နဲ႕ y postion 80 မွာ ဆြဲမယ္လုိ႕ ဆုိထားပါတယ္။ width ကေတာ့ 360 နဲ႕ height ကေတာ့ 240 ပါ။ အဲဒီ code ဟာ browser မွာ ဆုိရင္ ေအာက္ကလို အစိမ္းေရာင္ စတုဂံကို ျမင္ရပါလိမ့္မယ္။
Figure 11-1