代码:
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>钟表</title>
</head>
<body onload="draw()">
<canvas id="myCanvus" width="400px" height="400px" style="border:1px dashed black;">
出现文字表示你的浏览器不支持HTML5
</canvas>
</body>
</html>
<script type="text/javascript">
<!--
function draw(){
var canvas=document.getElementById('myCanvus');
canvas.width=400;
canvas.height=400;
context=canvas.getContext('2d');
context.translate(200,200);
clock=new Clock(200);
clock.init();
animate();
};
var context;
var clock;
function animate(){
context.clearRect(-200,-200,400,400);// 清屏
clock.paintBg(context);
clock.paintScale(context);
clock.paintPointers(context);
if(true){
// 让浏览器自行决定帧速率
window.requestAnimationFrame(animate);
}
}
// 钟表类
function Clock(radius){
this.radius=radius;
this.img;
this.init=function(){
this.img=new Image();
this.img.src="bg.jpg";
}
// 画背景
this.paintBg=function(ctx){
ctx.drawImage(this.img,0,0,400,400,-200,-200,400,400);
};
// 画刻度
this.paintScale=function(ctx){
var arr=["富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善"];
var offset=16;
ctx.save();
ctx.rotate(getRad(-94.5));
for(var i=0;i<60;i++){
var degree=i*6;
var x=(this.radius-offset)*Math.cos(getRad(degree));
var y=(this.radius-offset)*Math.sin(getRad(degree));
if((i % 5)==0){
ctx.save();
var x1=(this.radius-20)*Math.cos(getRad(degree));
var y1=(this.radius-20)*Math.sin(getRad(degree));
ctx.translate(x1,y1);
ctx.rotate(getRad(degree+96));
ctx.font="bold 16px 宋体";
ctx.fillStyle=getColor(i/5);
ctx.fillText(arr[i/5],0,0);
ctx.restore();
}
}
ctx.restore();
};
// 画指针
this.paintPointers=function(ctx){
var date = new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
ctx.font="bold 12px 宋体";
ctx.fillStyle="navy";
ctx.fillText(hour+":"+minute+":"+second,-20,-120);
var angleS=second*6;
var angleM=minute*6;
var angleH=hour*30+angleM/360*30;
context.save();
context.rotate(getRad(-90));
var x,y;
context.lineWidth=0.5;
x=(this.radius-2)*Math.cos(getRad(angleS));
y=(this.radius-2)*Math.sin(getRad(angleS));
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.moveTo(-x/3, -y/3);
ctx.lineTo(x,y);
ctx.stroke();
ctx.closePath();
context.lineWidth=1.5;
x=(this.radius-8)*Math.cos(getRad(angleM));
y=(this.radius-8)*Math.sin(getRad(angleM));
ctx.strokeStyle = "yellow";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(x,y);
ctx.stroke();
ctx.closePath();
context.lineWidth=2;
x=(this.radius-25)*Math.cos(getRad(angleH));
y=(this.radius-25)*Math.sin(getRad(angleH));
ctx.strokeStyle = "maroon";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(x,y);
ctx.stroke();
ctx.closePath();
context.restore();
ctx.fillStyle="black";
ctx.arc(0,0,2.5,0,Math.PI*2,false);
ctx.fill();
};
}
// 常规函数:角度得到弧度
function getRad(degree){
return degree/180*Math.PI;
}
// 常规函数:得到颜色
function getColor(index){
if(index==0){
return "green";
}else if(index==1){
return "silver";
}else if(index==2){
return "lime";
}else if(index==3){
return "gray";
}else if(index==4){
return "white";
}else if(index==5){
return "yellow";
}else if(index==6){
return "maroon";
}else if(index==7){
return "navy";
}else if(index==8){
return "red";
}else if(index==9){
return "blue";
}else if(index==10){
return "purple";
}else if(index==11){
return "teal";
}else if(index==12){
return "fuchsia";
}else if(index==13){
return "aqua";
}else if(index==14){
return "black";
}
}
//-->
</script>
代码下载：
https://files.cnblogs.com/files/xiandedanteng/clock20170926.rar