Deshan Nawanjana : HTML Canvas එකකින් ඇනිමේෂන් හදමු

HTML Canvas එකක් කියන්නේ හරියට චිත්‍ර අඳින්න ගන්න සාමාන්‍ය Canvas එකක් වගේ තමයි. HTML Canvas එකක් උඩ අපිට පුළුවන් ඕන විදිහේ චිත්‍රයක් අඳින්න. සාමාන්‍යයෙන් මේක උඩ චිත්‍ර අඳින්න භාවිතා වෙන්නේ JavaScript කියන Language එක‍. ඒත් HTML Canvas වලින් චිත්‍ර අඳින්න විතරක් නෙමේ... Video Aniamtion, Online Games පවා Coding කරන්න පුළුවන්. හරි... දැන් බලමු මූලික හැඳින්වීම...

ඇත්තටම Game එකක් කිව්වහම එතන තියෙන්නෙත් එක්තරා Video එකක් තමා. විශේෂත්වය තමයි Mouse Pointer, Keyboard Buttons වල ක්‍රියාතාරීත්වය අනුව වෙනස් වන Video එකක් කියලා හිතන්න පුළුවන්... ඉස්සර කාලේ චිත්‍රපට වල තිබුනේ චලන රූප තාක්ෂණයක්. ඒ කියන්නේ එක පෙළට චිත්‍ර ගොඩක් අඳිනවා පොඩි පොඩි වෙනස්කම් තියෙන විදිහට... උදාහරණයක් විදිහට මලක් පිපෙන දර්ෂණයක් නම්... මල පිපෙන පියවර තැනින් තැන ඇඳලා රූප පෙළක් හදාගන්නවා. ඒවා එක මත එක වේගෙන් වැටෙන්න සලස්වලා තමයි Video එකක් වගේ පේන්න සලස්වන්නේ. ඉතින් මේ HTML Canvas වලත් Aniamtion හදනකොට භාවිතා වෙන්නේ ඒ තාක්ෂණයමයි. හොඳයි... මුලින්ම අපි බලමු කොහොමද Coding එකේ මුල් පියවර කියලා...


<canvas width="300" height="300" id="canvas_1"></canvas>

මේක තමයි Canvas එකක HTML Tag එක. width="300" සහ height="300" කියන උපලක්ෂණවලින් Canvas එකේ දිග පළල දෙන්න පුළුවන්. id="canvas_1 කියලා එකක් දෙන්නේ JavaScript හඳුනාගැනීමේ නාමයක් විදිහට. <canvas> Tag එක ඇතුලේ තමයි චිත්‍රය ඇඳෙන්නේ. id එකක් දෙනකොට ඔයාලට කැමති නමක් දෙන්න පුළුවන්. ඒත් ඒක තනි නමක් වෙන්න ඕන. ඒ වගේම JavaScript කේතයක් වෙන්නත් බෑ.

හරි දැන් බලමු කොහොමද JavaScript එක කරන්නේ කියලා...


<script>

var c = document.getElementById("canvas_1");

var t = c.getContext("2d");

</script>

මේ Script පේලි දෙකෙන් තමයි මූලික Canvas Script එක පටන්ගන්නේ. මේකේ c විදිහට Canvas එක හඳුන්වා දෙන්නේ Canvas කියන Tag එක. ඊලඟට t කියන්නේ ඒ හඳුන්වා දුන්න Canvas එකේ ද්වීමාන සන්ධර්භය. අපි Canvas එක උඩ අඳින්නේ මෙන්න මේ ද්වීමාන සන්ධර්භය හරහා. දැන් මම යන්නේ Image එකක් මේ Canvas එක උඩ අඳින්නයි. ඒකට මම sample.jpg කියන පිංතූරයක් Coding කරන HTML File එක තියෙන Folder එකටම දාලයි තියෙන්නේ. මුලින්ම මම Image එක JavaScript වලට හඳුන්වා දෙනවා මේ විදිහට...


<script>

var i = new Image();

i.src="sample.jpg";

</script>

මම හිතන්නේ මේකනම් තේරෙන්න ඇති ඔයාලට. i කියලා පින්තූරයක් හඳුන්වා දීලා, ඒකේ Source එක sample.jpg කියලා දීලයි තියෙන්නේ... දැන් හරි සරලව මේ i කියන ඡායාරූපය අර Canvas එක උඩ අඳින්න පුළුවන්... පල්ලෙහා Code එකෙන්...


<script>

t.drawImage(i,10,10);

</script>

මෙතන t කියන්නේ අර කලින් හඳුන්වා දුන්න ද්වීමාන සන්ධර්භය. ඒක උඩ Image එක ඇඳෙන්නේ 10,10 කියන තැන... ඒ කියන්නේ Canvas එකේ වම් කොනේ ඉඳලා දකුණට පික්සල් 10කුයි, පහළට පික්සල් 10කුයි වෙන තැන ඉඳලා... මේ පල්ලෙහායි තියෙන්නේ සම්පූර්ණ Coding එකයි, ඒකේ Output එකයි...


<canvas width="300" height="300" id="canvas_1"></canvas>



<script>

var c = document.getElementById("canvas_1");

var t = c.getContext("2d");

var i = new Image();

i.src="sample.jpg";

t.drawImage(i,10,10);

</script>

අපිට මේ විහිදට කැමති Image ගානක් හඳුන්වා දීලා Canvas එක උඩ අඳින්න පුළුවන්. හොඳයි අපි දැන් බලමු කොහොමද මේක Aniamtion එකක් කරන්නේ කියලා...

ඔයාලා දැන්ගන්න ඕන වැදගත්ම දේ තමයි Canvas එක උඩ ඇන්ඳ කිසිම දෙයක් ආයේ JavaScript වලට අඳුනගන්න බෑ... ඒ කියන්නේ කලින් විදිහට Code කරාට පස්සේ අපිට බෑ ආයේ ඒ Canvas එක විතරක් භාවිතා කරලා Image එක මොකද්ද, ඒකේ Source එක මොකද්ද, ඒක ඇඳෙන තැන මොකද්ද කියලා අඳුනගන්න බෑ... මොකද ඒක එතකොට තනි Image එකක් වෙලා ඉවරයි. මේ හින්දා අපිට වෙනවා Canvas අක උඩ අඳින හැම දෙයක් ගැනම විස්තර Variables හරහා ඉදිරිපත් කරන්න. මෙන්න මේ වගේ...


<script>

var c = document.getElementById("canvas_1");

var t = c.getContext("2d");

var i = new Image();

i.src="sample.jpg";

var ix = 10;

var iy = 10;

t.drawImage(i,ix,iy);

</script>

එතකොට ඒ ix සහ iy විචල්‍ය වල අපට ඕන විස්තර සුරක්ෂිත වෙනවා. දැන් යමු ඊලඟ පියවරට...

ඔයාලට මතක ඇති මම කලින් කිව්ව චලන රූප ක්‍රමය... දැන් අපි යන්නේ ඒක භාවිතා කරන්න. සරළව කිව්වොත මෙතනදි වෙන්නේ Loop එකක් ආධාරයෙන් එක වේගෙන් Canvas එක උඩ ඇඳගෙන යන එකයි. ඒ අඳින වාරයක් පාසා අර ix සහ iy විචල්‍ය වෙනස් කරොත් මොකද වෙන්නේ කියලා ඔයාලට තේරෙනවා ඇති... එතකොට Image එක ඇඳෙන තැන වෙනස් වෙනවා...

මේ පල්ලෙහායින් තියෙන්නේ ඒ Loop code එක...


<script>

function main_loop() {

     ix+=1;

     iy+=1;

     t.drawImage(i,ix,iy);

}

setInterval(main_loop,100);

</script>

මම main_loop කියන නමින් තමයි Function එක හඳුන්වා දීලා තියෙන්නේ... ඊලඟට setInterval(main_loop,100) කියන කොටසින් main_loop කියන Function එක මිලිතත්පර 100 කට වතාවක් Loop වෙන්න ගන්නවා. මම එතනදි ix+=1 සහ iy+=1 කියලා දීලා තියෙන්නේ Image එක ඇඳෙන තැන වෙනස් වෙන්න... එතකොට සැරෙන් සැරේ Image එක පල්ලහොයින් තමා ඇඳෙන්නේ.

පල්ලෙහායින් තියෙන්නේ සම්පූර්ණ Coding එක... හැබැයි මෙතන Preview එකට මම Reset Button එකක් දාලා තියෙන්නේ, මොකද මේ වෙබ් Page එක Open වුන ගමන්ම Loop එක Run වෙලා Image එක Canvas Area එකත් පහු කරගෙන ගිහින් ඔයාලා මේක දකින කොට... ඒ හින්දා පල්ලෙහා තියෙන Coding එකට වඩා Preview එකේ මම කරලා තියෙන වෙනස තමයි දීලා තියෙන Reset Button එක උඩ Click කරනකොට ix=0 සහ iy=0 කරන එක... එතකොට Image එක ආයේ Canvas එකේ මුලෙන්ම ඇඳෙන්න ගන්න නිසා...


<script>

var c = document.getElementById("canvas_1");

var t = c.getContext("2d");

var i = new Image();

i.src="sample.jpg";

var ix = 10;

var iy = 10;

function main_loop() {

     ix+=1;

     iy+=1;

     t.drawImage(i,ix,iy);

}

setInterval(main_loop,100);

</script>

Reset Button එක Click කරන්න.

ඔයාලට පේනවා ඇති Image එක ඇදිලා යනවා වගේ... කලින් ඇන්ද Image එක මකන්නේ නැතුව ඒක උඩම ඇන්ද නිසයි එහෙම වෙන්නේ... මේක හින්දා අපි Loop එක ඇතුලෙම ඇඳෙන පියවරට කලින් Canvas එක Clear කරලා ඉන්න ඕන මේ වගේ...


<script>

function main_loop() {

     ix+=1;

     iy+=1;

     t.clearRect(0,0,c.width,c.height);

     t.drawImage(i,ix,iy);

}

setInterval(main_loop,100);

</script>

clearRect කියන ක්‍රමය තමයි මේකට භාවිතා කරන්නේ. එතනදි වෙන්නේ හිස් Rectangle එකක් 0,0 හෙවත් Canvas එකේ වම් උඩ කො‍ණේ ඉඳලා c.width,c.height හෙවත් Canvas එකේ දකුණු යටි කොණ වෙනකම් ඇඳෙන එකයි. මේ තියෙන්නේ ඒකට Coding එක...


<script>

var c = document.getElementById("canvas_1");

var t = c.getContext("2d");

var i = new Image();

i.src="sample.jpg";

var ix = 10;

var iy = 10;

function main_loop() {

     ix+=1;

     iy+=1;

     t.clearRect(0,0,c.width,c.height);

     t.drawImage(i,ix,iy);

}

setInterval(main_loop,100);

</script>

Reset Button එක Click කරන්න.

දැන් පැහැදිලි ඇති සෑහෙන දුරට HTML Canvas එකකින් ඇනිමේෂන් කරන්නේ කොහොමද කියලා... ඇත්තටම විචල්‍ය ගොඩක්... ඒවගේම Images ගොඩක් භාවිතා කරලා සංකීර්ණව කරන HTML Canvas තමයි මේකේ දියුණු පියවර... ඒ වගේම මම දැන් කියලා දෙන්නම් Mouse එකේ Location එක අරගෙන කොහොමද ඒ Location එකේ Image එක අඳින්නේ කියලා...


<canvas width="300" height="300" id="canvas_1" onmousemove="ani(event)"></canvas>

මුලින්ම කරන්න ඕන මේ වගේ Canvas Tag එක උඩට Mouse Move කරාම Run වෙන Event එකක් ලියන එක... එතන Funtcion එකේ නම ani කියලයි මම හඳුන්වා දීලා තියෙන්නේ... ani(event) කියන එකේ event කොටස නිසා Function එක තුළට යැවෙන්නේ මේ event එක ගැන විස්තර... බලන්නකො පල්ලෙහා Script එක...


<script>

function ani(e) {

     var mouseX, mouseY;

     if(e.offsetX) {

          mouseX = e.offsetX;

          mouseY = e.offsetY;

     }

     else if(e.layerX) {

          mouseX = e.layerX;

          mouseY = e.layerY;

     }

          ix4 = mouseX;

          iy4 = mouseY;

}

</script>

Function එකෙන් මම ඒ ලැබෙන විස්තර අරගන්නේ e කියලා විචල්‍යයකට... mouseX කියන්නේ Mouse එකේ තිරස් පිහිටීම... ඒ වගේම mouseY කියන්නේ එකේ සිරස් පිහිටීම... ඒවා මෙතනදි මම ix,iy වලට ඇතුල් කරන හින්දා වෙන දේ ඔයාලට තේරෙනවා මම හිතන්නේ, එතකොට Image එක ඇඳෙන්නේ Mouse Locaton එකේ කියලා... මෙන්න Coding එක...


<canvas width="300" height="300" id="canvas_1" onmousemove="ani(event)"></canvas>



<script>

var c = document.getElementById("canvas_1");

var t = c.getContext("2d");

var i = new Image();

i.src="sample.jpg";

var ix = 10;

var iy = 10;

function main_loop() {

     ix+=1;

     iy+=1;

     t.clearRect(0,0,c.width,c.height);

     t.drawImage(i,ix,iy);

}

setInterval(main_loop,100);

function ani(e) {

     var mouseX, mouseY;

     if(e.offsetX) {

          mouseX = e.offsetX;

          mouseY = e.offsetY;

     }

     else if(e.layerX) {

          mouseX = e.layerX;

          mouseY = e.layerY;

     }

          ix4 = mouseX;

          iy4 = mouseY;

}

</script>

Mouse එක Canvas එක උඩට ගේන්න.

මම හිතන්නේ දැන් හුඟක් දුරට වැඩේ පැහැදිලී කියලයි... මේ විදිහේ ගොඩක් සංකීර්ණව කරපු නිර්මාණ දෙකක්ම මගේ Blog එකේ Overview පිටුවේ තියෙනවා ඔයාලා දකින්න ඇති... මේකේදි හුඟක්ම වැදගත් වෙන්නේ ඛණ්ඩාංක ජ්‍යාමිතිය වගේම තාර්කික යෙදුම්. මේ පිටුව අවසානයේ මගෙ Blog එකේ Copywrite කියන කොටසේ තියෙන Animation එකත් HTML Canvas නිර්මාණයක්....!

සංකීර්ණ නිර්මාණ ගොඩක් http://playcanv.as/ කියන වෙබ් අඩවියෙන් බලාගන්න පුළුවන්... ;-)