html5背景图片动画,html5 canvas带背景图片时钟动画特效

特效描述：带背景时钟动画 动画特效。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);