គោលការណ៍នៃ គំនូរជីវចល (animation) នៅក្នុងធាតុ canvas ក៏មិនខុសគ្នាពីគោលការណ៍ទូទៅនៃគំនូរជីវចលនៅក្នុងខ្សែភាពយន្តដែរ។ ពោលគឺមានគោលការណ៍ដ៏ធំចំបង ២ ដែលអ្នកផលិតគំនូរជីវចលទាំងឡាយតែងតែយកមកអនុវត្ត។ គោលការណ៍ទី ១ គឺការផ្លាស់ប្តូរទីតាំងនិងឬកែប្រែទំរង់របស់រូបគំនូរទាំងឡាយ នៅក្នុងរយពេលកំណត់ណាមួយ។ គោលការណ៍ទី ២ គឺការបែងចែករូបភាពនៃចលនារបស់រូបគំនូរទាំងនោះ ជារូបភាពតូចៗ បានកាន់តែច្រើនកាន់តែល្អ។ រូបភាពតូចៗទាំងនោះ ត្រូវគេអោយឈ្មោះថាជា frame ។ ឧទាហរណ៍ រូបភាពនៃចលនាលើកដៃអេះក្បាលរបស់រូបគំនូរ អាចចែកចេញជារូបភាពតូចៗជាច្រើនទៀត គឺចាប់តាំងពីរូបភាពលើកដៃដំបូង រហូតដល់រូបភាពយកដៃអេះក្បាលចុងក្រោយគេ។ យ៉ាងណាម៉ិញ ពាក្យថារូបភាពតូច មិនមែនមានន័យថាមានទំហំតូចនោះទេ គឺមានន័យថា ជារូបភាពរងនៃចលនាណាមួយនៅក្នុងខណៈណាមួយ។
និយាយរួម រូបភាពនៃចលនាណាមួយ គឺជាការកើតចេញពីការយករូបភាពតូចៗនៃចលនានោះ ចាប់ពីពេលចាប់ផ្តើម រហូតដល់ពេលចប់ មកបង្ហាញដល់ទស្សនិកជន មួយម្តងៗ យ៉ាងរហ័សជាទីបំផុត។ ជាទូទៅ ល្បឿនមធ្យមនៃការបង្ហាញរូបភាពតូចៗដែលជា frame ទាំងនោះត្រូវអោយបានយ៉ាងហោចណាស់ក៏ពី ១០ ទៅ ១២ រូបក្នុងមួយវិនាទីដែរ ទើបធ្វើអោយភ្នែកមនុស្សយើង មើលឃើញថាជាចលនាជាប់មិនដាច់។ ផ្ទុយទៅវិញ បើរូបភាពដែលត្រូវយកមកបង្ហាញមានចំនួនតិចពេក ភ្នែកមនុស្សយើងនឹងមើលឃើញរូបភាពទាំងនោះមានចលនាដើរឈប់ៗ។ ពិនិត្យកម្មវិធីខាងក្រោមនេះ៖
នៅក្នុងកម្មវិធីខាងលើនេះ យើងពិនិត្យឃើញថា ការង្ហាញរូបនាឡិកាប៉ោលជាមួយនឹងទ្រនិចស្ថិតនៅទីតាំងថ្មី ត្រូវធ្វើឡើងរាល់មួយវិនាទីម្តង ពីព្រោះរូបទ្រនិចនាឡិកាខាងលើនេះ មានចលនាតែក្នុងមួយវិនាទីម្តងតែប៉ុណ្ណោះ ដូចនេះយើងមិនចាំបាច់បង្ហាញរូបនាឡិកាចំនួនពី ១០ ទៅ ១២ រូបដើម្បីអោយមានចលនាដោយរលូនឡើយ។
យ៉ាងណាម៉ិញ ការគូររូបនាឡិកាជាមួយនឹងទ្រនិចនៅទីតាំងថ្មីត្រូវធ្វើឡើងដោយប្រើប្រាស់វិធីមានស្រាប់មួយចំនួនទាក់ទងនឹងផ្ទាំងគំនូរ canvas ទ្វេមាត្រ។ ហើយការគូរនោះត្រូវធ្វើឡើងរាល់មួយវិនាទីម្តង ដោយប្រើប្រាស់ក្បួនមានស្រាប់ setInterval() ដូចនៅលើបន្ទាត់លេខ 85 នោះស្រាប់។ ក្បួនមួយនេះដើរតួនាទីសំខាន់នៅក្នុងគំនូរជីវចលនិងល្បែងកំព្យូទ័រ ព្រោះវាធ្វើអោយកម្មវិធី JS ដំណើរការទៅជាប់រហូត ដូចជាកម្មវិធីនៅលើ server ដែរ៕
និយាយរួម រូបភាពនៃចលនាណាមួយ គឺជាការកើតចេញពីការយករូបភាពតូចៗនៃចលនានោះ ចាប់ពីពេលចាប់ផ្តើម រហូតដល់ពេលចប់ មកបង្ហាញដល់ទស្សនិកជន មួយម្តងៗ យ៉ាងរហ័សជាទីបំផុត។ ជាទូទៅ ល្បឿនមធ្យមនៃការបង្ហាញរូបភាពតូចៗដែលជា frame ទាំងនោះត្រូវអោយបានយ៉ាងហោចណាស់ក៏ពី ១០ ទៅ ១២ រូបក្នុងមួយវិនាទីដែរ ទើបធ្វើអោយភ្នែកមនុស្សយើង មើលឃើញថាជាចលនាជាប់មិនដាច់។ ផ្ទុយទៅវិញ បើរូបភាពដែលត្រូវយកមកបង្ហាញមានចំនួនតិចពេក ភ្នែកមនុស្សយើងនឹងមើលឃើញរូបភាពទាំងនោះមានចលនាដើរឈប់ៗ។ ពិនិត្យកម្មវិធីខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="vuthclock" width="613" height="520"> </canvas>
<img id="clock" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgILxJJijz1XkNhEeYqijKev0g4nn05lzL9Apt3qb-pO2KnTNEseQXZTABDYWGaNrhY984g0Mz-edznp1MpQYqKzEsKqj4QyvnN4lWcMqDXu7eKHBYQ5XfgdlvoZvkP2qUVQn1qDjAt00o/s512/clock.png" />
<script>
function draw(){
var canvas = document.getElementById('vuthclock');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
var img = document.getElementById("clock");
ctx.drawImage(img, 0, 0);
//ក្បួនគណនាកូអរដោនេ
function xyAxis(angle,radius, center){
var x = Math.round(radius * Math.sin(Math.PI - angle) + center[0]);
var y = Math.round(radius * Math.cos(Math.PI - angle) + center[1]);
return [x,y];
}
//គូរទ្រនិចម៉ោង
var dimension = 512;
var date = new Date();
var angle = date.getHours()*Math.PI/6 + Math.PI/6/60*date.getMinutes();
ctx.beginPath();
ctx.lineCap = 'round';
ctx.lineWidth = 12;
ctx.strokeStyle = "white";
ctx.moveTo(dimension/2, dimension/2);
lineTo = xyAxis(angle,dimension/2-70, [dimension/2, dimension/2]);
ctx.lineTo(lineTo[0], lineTo[1]);
ctx.stroke();
//គូរទ្រនិចនាទី
angle = date.getMinutes()*Math.PI/30;
ctx.beginPath();
ctx.lineCap = 'round';
ctx.lineWidth = 8;
ctx.strokeStyle = "white";
ctx.moveTo(dimension/2, dimension/2);
lineTo = xyAxis(angle,dimension/2-30, [dimension/2, dimension/2]);
ctx.lineTo(lineTo[0], lineTo[1]);
ctx.stroke();
//គូរទ្រនិចវិនាទី
angle = date.getSeconds()*Math.PI/30;
ctx.beginPath();
ctx.lineCap = 'round';
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.moveTo(dimension/2, dimension/2);
lineTo = xyAxis(angle,dimension/2-10, [dimension/2, dimension/2]);
ctx.lineTo(lineTo[0], lineTo[1]);
ctx.stroke();
//គូររង្វង់គល់ទ្រនិច
var x = dimension/2;
var y = dimension/2;
radius = 15;
startAngle = 0;
endAngle = Math.PI*2;
anticlockwise = true;
ctx.fillStyle = "white";
ctx.strokeStyle = "darkBLue";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
ctx.fill();
}
}
WebFont.load({
custom: {
families: ['Moul'],
urls:['fonts/fonts.css']
},
active: function(){
setInterval("draw()", 1000);
},
inactive: function(){
alert('មិនអាចទាញយកពុម្ពអក្សរបានទេ។');
}
});
</script>
</body>
</html>
នៅក្នុងកម្មវិធីខាងលើនេះ យើងពិនិត្យឃើញថា ការង្ហាញរូបនាឡិកាប៉ោលជាមួយនឹងទ្រនិចស្ថិតនៅទីតាំងថ្មី ត្រូវធ្វើឡើងរាល់មួយវិនាទីម្តង ពីព្រោះរូបទ្រនិចនាឡិកាខាងលើនេះ មានចលនាតែក្នុងមួយវិនាទីម្តងតែប៉ុណ្ណោះ ដូចនេះយើងមិនចាំបាច់បង្ហាញរូបនាឡិកាចំនួនពី ១០ ទៅ ១២ រូបដើម្បីអោយមានចលនាដោយរលូនឡើយ។
យ៉ាងណាម៉ិញ ការគូររូបនាឡិកាជាមួយនឹងទ្រនិចនៅទីតាំងថ្មីត្រូវធ្វើឡើងដោយប្រើប្រាស់វិធីមានស្រាប់មួយចំនួនទាក់ទងនឹងផ្ទាំងគំនូរ canvas ទ្វេមាត្រ។ ហើយការគូរនោះត្រូវធ្វើឡើងរាល់មួយវិនាទីម្តង ដោយប្រើប្រាស់ក្បួនមានស្រាប់ setInterval() ដូចនៅលើបន្ទាត់លេខ 85 នោះស្រាប់។ ក្បួនមួយនេះដើរតួនាទីសំខាន់នៅក្នុងគំនូរជីវចលនិងល្បែងកំព្យូទ័រ ព្រោះវាធ្វើអោយកម្មវិធី JS ដំណើរការទៅជាប់រហូត ដូចជាកម្មវិធីនៅលើ server ដែរ៕
Transformations
| Method | Description |
|---|---|
| scale() | Scales the current drawing bigger or smaller |
| rotate() | Rotates the current drawing |
| translate() | Remaps the (0,0) position on the canvas |
| transform() | Replaces the current transformation matrix for the drawing |
| setTransform() | Resets the current transform to the identity matrix. Then runs transform() |
