Thông thường muốn chèn đồng hồ đẹp cho web/blog, các bạn thường sử dụng đồng hồ dạng flash. Thật chẳng may khi hiện nay, flash lại bị các trình duyệt web "hắt hủi", không bật flash mặc định nữa vì tồn tại những lỗi bảo mật, ngốn nhiều tài nguyên máy tính (sử dụng RAM, ngốn năng lượng...). Một nguyên nhân khác là vì HTML5 ra đời với khả năng có thể thay thế hoàn toàn flash, mang nhiều ưu điểm của người ra sau như bảo mật, hiệu năng...
<script>
const ONE_RADIAN = Math.PI/180;
const CLOCK_RADIUS = 100;
const SECOND_HAND_SIZE = CLOCK_RADIUS * 0.9;
const MINUTE_HAND_SIZE = CLOCK_RADIUS * 0.7;
const HOUR_HAND_SIZE = CLOCK_RADIUS * 0.5;
var cx;
var cy;
var canvas;
var context;
var _animationFrame;
var _startTime;
function loop(time) {
var diffTime = Math.abs(time - _startTime);
if(diffTime >= 1000)
{
update();
_startTime = time;
}
_animationFrame(loop);
}
function drawLine(x1,y1,x2,y2,lineWidth,color){
context.save();
context.lineWidth = lineWidth;
if(color)
context.strokeStyle = color;
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2, y2);
context.closePath();
context.stroke();
context.restore();
}
function drawCircle(cx,cy,radius){
context.beginPath();
context.arc(cx,cy, radius, 0, Math.PI*2, true);
context.closePath();
context.fill();
}
function update(){
context.clearRect(0, 0, canvas.width, canvas.height);
drawCircle(cx,cy,4);
for(var i=0;i<60;i++){
var angle = 6*i*ONE_RADIAN;
var x = cx + Math.cos(angle)*CLOCK_RADIUS;
var y = cy + Math.sin(angle)*CLOCK_RADIUS;
var radius = 1;
if(i%5==0)
{
radius = 3;
var hour = (i/5+3)%12;
if(hour == 0)
hour = 12;
var tw = context.measureText(hour).width;
// text location
var tx = cx + Math.cos(angle)*SECOND_HAND_SIZE-tw/2;
var ty = cy + Math.sin(angle)*SECOND_HAND_SIZE+6;
context.fillText(hour,tx,ty);
}
drawCircle(x,y,radius);
}
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var angle = ONE_RADIAN*seconds*6;
var x = cx + Math.sin(angle)*SECOND_HAND_SIZE;
var y = cx - Math.cos(angle)*SECOND_HAND_SIZE;
drawLine(cx,cy,x,y,1);
angle = ONE_RADIAN*minutes*6;
x = cx + Math.sin(angle)*MINUTE_HAND_SIZE;
y = cx - Math.cos(angle)*MINUTE_HAND_SIZE;
drawLine(cx,cy,x,y,2,"blue");
angle = ONE_RADIAN * (hours+minutes/60)*30;
x = cx + Math.sin(angle)*HOUR_HAND_SIZE;
y = cx - Math.cos(angle)*HOUR_HAND_SIZE;
drawLine(cx,cy,x,y,4,"#900000");
}
window.onload = function(){
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
context.font = "14px Arial";
cx = canvas.width/2;
cy = canvas.height/2;
_animationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ;
if(_animationFrame)
{
_startTime = Date.now();
_animationFrame(loop);
}
else
alert("[Tấn Duy's Blog] - Trình duyệt của bạn không hỗ trợ requestAnimationFrame");
};
</script>
<center>
<canvas id="canvas" width="240px" height="240px" style="background-color: #afff84"></canvas></center>
Chúc bạn một ngày vui vẻ!
