画钟表是2D画图的老生常谈，我也不能免俗弄了一个。代码如下：
<!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="200px" height="200px" style="border:1px dashed black;">
出现文字表示你的浏览器不支持HTML5
</canvas>
</body>
</html>
<script type="text/javascript">
<!--
function draw(){
var canvas=document.getElementById(‘myCanvus‘);
canvas.width=200;
canvas.height=200;
context=canvas.getContext(‘2d‘);
context.translate(100,100);
clock=new Clock(100);
clock.init();
animate();
};
var context;
var clock;
function animate(){
context.clearRect(-100,-100,200,200);// 清屏
clock.paintBg(context);
clock.paintScale(context);
clock.paintNumbers(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="clock7.jpg";
}
// 画背景
this.paintBg=function(ctx){
ctx.drawImage(this.img,66,50,880,880,-100,-100,200,200);
};
// 画刻度
this.paintScale=function(ctx){
for(var i=0;i<60;i++){
var degree=i*6;
var x=this.radius*Math.cos(getRad(degree));
var y=this.radius*Math.sin(getRad(degree));
ctx.strokeStyle = "black";
ctx.fillStyle="black";
ctx.beginPath();
if((i % 5)==0){
ctx.arc(x,y,1.5,0,Math.PI*2,false);
}else{
//ctx.arc(x,y,0.5,0,Math.PI*2,false);
}
ctx.closePath();
ctx.fill();
}
};
// 画数字
this.paintNumbers=function(ctx){
ctx.font="bold 16px 宋体";
ctx.fillStyle="Red";
ctx.fillText("XII",-12,-80);
ctx.fillText("VI",-8,93);
ctx.fillText("IX",-94,5);
ctx.fillText("III",68,5);
};
// 画指针
this.paintPointers=function(ctx){
var date = new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
ctx.font="bold 6px 宋体";
ctx.fillStyle="navy";
ctx.fillText(hour+":"+minute+":"+second,12,-50);
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/clock.rar
时间： 2024-10-19 14:56:42