特效描述:带背景时钟动画 动画特效。html5画布画的时钟
代码结构
1. HTML代码
var cvs=document.getElementById('cvs');
var ctx=cvs.getContext('2d');
function Clock(){
// 时钟背景图
var Img=document.createElement('img');
Img.src='01.jpg';
// Img.οnlοad=function (){
ctx.drawImage(Img,0,0,420,420);
// }
// 时钟圆盘
ctx.beginPath();
ctx.strokeStyle='#60D9F8';
ctx.lineWidth=10;
ctx.arc(210,210,200,0,2*Math.PI,true);
ctx.clip();
ctx.stroke();
ctx.closePath();
// 分刻度 360/60=6
for (var i = 0; i < 60; i++) {
ctx.save();
ctx.beginPath();
ctx.translate(210,210);
ctx.rotate(i*6*Math.PI/180);
ctx.strokeStyle='#FEF319';
ctx.lineWidth=5;
ctx.moveTo(0,-185);
ctx.lineTo(0,-195);
ctx.stroke();
ctx.closePath();
ctx.restore();
};
// 时刻度 360/12=30
for (var i = 0; i < 12; i++) {
ctx.save();
ctx.beginPath();
ctx.translate(210,210);
ctx.rotate(i*30*Math.PI/180);
ctx.strokeStyle='#60D9F8';
ctx.lineWidth=8;
ctx.moveTo(0,-175);
ctx.lineTo(0,-195);
ctx.stroke();
ctx.closePath();
ctx.restore();
};
// 获取当前时间
var dates=new Date();
var h=dates.getHours();
var m=dates.getMinutes();
var s=dates.getSeconds();
h=h+m/60;//3.5
m=m+s/60;
// 画时间
var h2=dates.getHours();
var m2=dates.getMinutes();
var str1=h2>9?h2:('0'+h2);
var str2=m2>9?m2:('0'+m2);
ctx.beginPath();
ctx.fillStyle='#FB1F11';
ctx.font='26px 微软雅黑';
ctx.fillText(str1+':'+str2,175,340);
ctx.closePath();
// 时针
ctx.save();
ctx.beginPath();
ctx.translate(210,210);
ctx.rotate(h*30*Math.PI/180);
ctx.strokeStyle='#60D9F8';
ctx.lineWidth=8;
ctx.moveTo(0,14);
ctx.lineTo(0,-130);
ctx.stroke();
ctx.closePath();
ctx.restore();
// 分钟
ctx.save();
ctx.beginPath();
ctx.translate(210,210);
ctx.rotate(m*6*Math.PI/180);
ctx.strokeStyle='#FEF319';
ctx.lineWidth=5;
ctx.moveTo(0,14);
ctx.lineTo(0,-150);
ctx.stroke();
ctx.closePath();
ctx.restore();
// 秒针
ctx.save();
ctx.beginPath();
ctx.translate(210,210);
ctx.rotate(s*6*Math.PI/180);
ctx.strokeStyle='#FB1F11';
ctx.lineWidth=3;
ctx.moveTo(0,14);
ctx.lineTo(0,-170);
ctx.stroke();
ctx.closePath();
//秒针上的圆
ctx.beginPath();
ctx.fillStyle='#60D9F8';
ctx.strokeStyle='#FB1F11';
ctx.lineWidth=3;
ctx.arc(0,-155,5,0,2*Math.PI,true);
ctx.fill();
ctx.stroke();
ctx.closePath();
//中心圆
ctx.beginPath();
ctx.fillStyle='#60D9F8';
ctx.strokeStyle='#FB1F11';
ctx.lineWidth=3;
ctx.arc(0,0,7,0,2*Math.PI,true);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
}
Clock();
setInterval(Clock,1000);