សំណួរ
១. តើប្រព័ន្ធអ័ក្សកូអរដោនេក្នុងប្លង់ និងប្រព័ន្ធអ័ក្សកូអរដោនេទ្វេធាតុនៅក្នុងកំព្យូទ័រខុសគ្នាដូចម្តេចខ្លះ?
២. តើយើងគួរគូររូបដោយផ្ទាល់នៅលើ canvas ឬយករូបពីក្រៅមកប្រើនៅក្នុង canvas?
៣. តើត្រូវធ្វើដូចម្តេចខ្លះ ដើម្បីបង្កើតគំនូរជីវចលនៅក្នុង canvas ?
លំហាត់អនុវត្តន៍
ដោយប្រើប្រាស់កូដខាងក្រោមនេះ ចូរសរសេរកូដបង្កើតកាលបរិច្ឆេទនិងនាឡិកា digital លេខខ្មែរ បន្ថែមទៅលើមុខនាឡិកាប៉ោលខាងក្រោមនេះ៖
<!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>
