先给个效果图，我画的比较丑，大家可以自己美化一下，
直接上代码：
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<canvas width="500" height="500" id="clock" >
您的浏览器不支持canvas
</canvas>
<script>
//获取画布
var clock=document.getElementById(‘clock‘);
//设置绘图环境
var cxt=clock.getContext(‘2d‘);
function drawClock(){
//清除画布
cxt.clearRect(0,0,500,500);
//获取时间，
var now =new Date();
var second =now.getSeconds();
var minute =now.getMinutes();
var hour1 =now.getHours();
//将24小时进制转为12小时，且为浮点型
var hour=hour1+minute/60;
hour=hour>12 ?hour-12:hour;
//获取全部时间
var time=now.toLocaleString( );
//表盘
//开始新路径
cxt.beginPath();
cxt.lineWidth=8;
cxt.strokeStyle="blue";
//路径函数 x,y,r,角度范围,顺时针/逆时针
cxt.arc(250,250,200,0,360,false);
cxt.stroke();
cxt.closePath();
//刻度,利用旋转
//时刻度
for(var i=0;i<12;i++){
//保存当前状态
cxt.save();
//刻度粗细
cxt.lineWidth=5;
//刻度颜色
cxt.strokeStyle="black"
//设置00点,以画布中心为00
cxt.translate(250,250);
//设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
cxt.rotate(i*30*Math.PI/180);
cxt.beginPath();
//刻度起始点
cxt.moveTo(0,-180);
//刻度结束点
cxt.lineTo(0,-195);
cxt.closePath();
cxt.stroke();
//将旋转后的图片返回原画布
cxt.restore();
}
//分刻度
for(var i=0;i<60;i++){
//保存当前状态
cxt.save();
//刻度粗细
cxt.lineWidth=3;
//刻度颜色
cxt.strokeStyle="black"
//设置00点,以画布中心为00
cxt.translate(250,250);
//设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
cxt.rotate(i*6*Math.PI/180);
cxt.beginPath();
//起始点
cxt.moveTo(0,-188);
cxt.lineTo(0,-195);
cxt.closePath();
cxt.stroke();
//将旋转后的图片返回原画布
cxt.restore();
}
//表盘中心
cxt.beginPath();
cxt.lineWidth=1;
cxt.strokeStyle="red";
cxt.fillStyle="red";
//路径函数 x,y,r,角度范围,顺时针/逆时针
cxt.arc(250,250,4,0,360,false);
cxt.fill();
cxt.stroke();
cxt.closePath();
//时针
//保存当前状态
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="black";
//设置异次元空间00点
cxt.translate(250,250);
//设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-120);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
cxt.lineWidth="3";
cxt.strokeStyle="black";
cxt.translate(250,250);
cxt.rotate(minute*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-150);
cxt.lineTo(0,15);
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒针
cxt.save();
cxt.lineWidth="1.5";
cxt.strokeStyle="red";
cxt.translate(250,250);
cxt.rotate(second*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
//秒针前端小点
cxt.beginPath();
//外环为红色
cxt.strokeStyle="red";
//灰色填充
cxt.fillStyle="gray";
cxt.arc(0,-145,4,0,360,false);
cxt.fill();
cxt.closePath();
cxt.stroke();
cxt.restore();
//表盘中心
cxt.beginPath();
cxt.lineWidth=1;
//外环为红色
cxt.strokeStyle="red";
//灰色填充
cxt.fillStyle="gray";
//路径函数 x,y,r,角度范围,顺时针/逆时针
cxt.arc(250,250,4,0,360,false);
cxt.fill();
cxt.stroke();
cxt.closePath();
//写时间
cxt.font="15px 黑体 ";
cxt.fillStyle="black";
//实心字
cxt.fillText(time,160,150);
}
//使用setInterval(代码，毫秒时间)使时钟转起来;
drawClock();
setInterval(drawClock,1000);
</script>
</body>
</html>
玩转html5（四）----使用canvas画一个时钟（可以动的哦！）,码迷,mamicode.com
时间： 2024-10-12 19:56:40