用Html5实现时钟,包括转盘时钟和电子时钟,显示当前日期时间
绘制步骤:
(1)先获取画布,设置画布的大小;
(2)在js中获取画布对象,获取画布的画笔对象,设置画笔的一些属性;
(3)获取系统当前时间,转换成时分秒,用变量保存下来;
(4)先画分钟刻度线,每6°画一条线,共60条刻度线(循环);
(5)画时钟刻度线,每30°画一条线,相对分针长一点粗一点,共12条线
(6)画时针、分针和秒针,时针最短最粗,秒针最细最长,根据当前时间把时针,分针,秒针旋转到相应位置;
(7)接着绘制数字时钟,根据当前的时间在画布上绘制文字,显示时间日期(年月日)星期几;
(8)调用函数,并设置定时器定时执行函数,实现动态效果。
效果图:
源代码:
<!DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style type="text/css">
canvas{
margin: 100px 80px;
}
</style>
</head>
<body>
<canvas id="clock"width="1000" height="200"></canvas>
<scripttype="text/javascript">
var canvas =document.querySelector("canvas");
canvas.style.background ="blue";
var g = canvas.getContext("2d");
//绘制转盘时钟
function drawArcClock() {
g.clearRect(0, 0, 100, 100);
var data = new Date();
var sec = data.getSeconds();
var min = data.getMinutes();
var hour = data.getHours();
g.save();
g.translate(50, 50);
g.rotate(-Math.PI / 2);
//分钟刻度线
for(var i = 0; i < 60; i++) {//画60个刻度线
g.beginPath();
g.strokeStyle ="white";
g.lineWidth = 1;
g.moveTo(50, 0);
g.lineTo(45, 0);
g.stroke();
g.rotate(Math.PI / 30); //每个6deg画一个时钟刻度线
g.closePath();
}
//时钟刻度线
for(var i = 0; i < 12; i++) {//画12个刻度线
g.beginPath();
g.strokeStyle ="white";
g.lineWidth = 2;
g.moveTo(50, 0);
g.lineTo(40, 0);
g.stroke();
g.rotate(Math.PI / 6); //每个30deg画一个时钟刻度线
g.closePath();
}
//画时针
hour = hour > 12 ? hour - 12 :hour;
g.beginPath();
g.save();
g.rotate(Math.PI / 6 * hour +Math.PI / 6 * min / 60 + Math.PI / 6 * sec / 3600);
g.strokeStyle = "white";
g.lineWidth = 3;
g.moveTo(-10, 0);
g.lineTo(30, 0);
g.stroke();
g.restore();
g.closePath();
//画分针
g.beginPath();
g.save();
g.rotate(Math.PI / 30 * min +Math.PI / 30 * sec / 60);
g.strokeStyle = "white";
g.lineWidth = 2;
g.moveTo(-5, 0);
g.lineTo(30, 0);
g.stroke();
g.restore();
g.closePath();
//画秒针
g.beginPath();
g.save();
g.rotate(Math.PI / 30 * sec);
g.strokeStyle = "red";
g.lineWidth = 1;
g.moveTo(-10, 0);
g.lineTo(35, 0);
g.stroke();
g.restore();
g.closePath();
g.restore();
}
//绘制数字时钟
function drawNumClock(){
g.clearRect(100, 0, 1200, 200);
var data = new Date();
var str = data.getFullYear()+"年"+(data.getMonth()+1)+"月"+data.getDate()+"日";
var sec = data.getSeconds();
var min = data.getMinutes();
var hour = data.getHours();
var day =data.getDay(); //获取当前星期
if(day == 0){
day = "日";
}
else if(day==1){
day = "一";
}
else if(day==2){
day = "二";
}
else if(day==3){
day = "三";
}
else if(day==4){
day = "四";
}
else if(day==5){
day = "五";
}
else if(day==6){
day = "六";
}
g.fillStyle = "white";
g.font = "100px '楷体'";
g.lineWidth = "bolder";//字体加粗
g.beginPath();
g.fillText(hour,200,120);
g.fillText(":",300,110);
g.fillText(min,340,120);
g.font = "70px '楷体'";
g.fillText(sec,470,120);
g.font = "70px '楷体'";
g.fillText("星期",580,120);
g.fillText(day,730,120);
g.font = "50px '楷体'";
g.fillText(str,580,180);
}
drawArcClock();
drawNumClock();
setInterval(drawArcClock, 1000);
setInterval(drawNumClock, 1000);
</script>
</body>
</html>