这里做一个HTML5 入门的练手，一个小时钟项目，可以再上面拓展很多，程序员培养的就是思想
<!DOCTYPE HTML>
<html>
<head>
<title>Click</title>
<style>
#clock{
background:#abcdef;
}
</style>
</head>
<body>
<canvas id="clock" width="500" height="500" >
您的浏览器不支持标签，无法看到时钟
</canvas>
</body>
<script>
var clock = document.getElementById("clock");
var cxt = clock.getContext("2d");
function drawCloclk(){
cxt.clearRect(0,0,500,500);
//获取时间对象
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hours = now.getHours();
//小时必须获取浮点类型
hours = hours+min/60;
//转换时间
hours = hours >12?hours-12:hours;
//表盘 蓝色
cxt.lineWidth = 10;
cxt.strokeStyle="blue";
cxt.beginPath();
cxt.arc(250,250,200,0,360,false);
cxt.stroke();
cxt.closePath();
//刻度
for(var i=0;i<12;i++){
//开启异次元空间
cxt.save();
cxt.beginPath();
cxt.lineWidth = 10;
cxt.strokeStyle="#000";
//设置原点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(i*30*Math.PI/180);
//画线
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//分刻度
for(var i=0;i<60;i++){
//开启异次元空间
cxt.save();
cxt.beginPath();
cxt.lineWidth = 5;
cxt.strokeStyle="#000";
//设置原点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(i*6*Math.PI/180);
//画线
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//时针
//开启异次元空间
cxt.save();
cxt.beginPath();
cxt.lineWidth = 7;
cxt.strokeStyle="#000";
//设置原点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(hours*30*Math.PI/180);
//画线
cxt.moveTo(0,-140);
cxt.lineTo(0,10);
cxt.stroke();
cxt.closePath();
cxt.restore();
//分针
//开启异次元空间
cxt.save();
cxt.beginPath();
cxt.lineWidth = 5;
cxt.strokeStyle="#000";
//设置原点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(min*6*Math.PI/180);
//画线
cxt.moveTo(0,-160);
cxt.lineTo(0,15);
cxt.stroke();
cxt.closePath();
cxt.restore();
//秒针
//开启异次元空间
cxt.save();
cxt.beginPath();
cxt.lineWidth = 3;
cxt.strokeStyle="red";
//设置原点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(sec*6*Math.PI/180);
//画线
cxt.moveTo(0,-170);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
cxt.beginPath();
//画交叉点
cxt.arc(0,0,5,0,360,false)
cxt.closePath();
cxt.fillstyle = "blue";
cxt.fill();
cxt.stroke();
cxt.beginPath();
//画交叉点
cxt.arc(0,-150,5,0,360,false)
cxt.closePath();
cxt.fillstyle = "blue";
cxt.fill();
cxt.stroke();
cxt.restore();
}
//使用周期循环函数setInternal(代码，时间)，让时钟动起来
drawCloclk;
setInterval(drawCloclk,1000);
</script>
</html>
H TML5 之 （4） 小项目一 时钟,布布扣,bubuko.com
时间： 2024-08-03 08:52:31