<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="500px" height="500px" >
您的浏览器不兼容
</canvas>
<script>
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
function showTime(){
cxt.clearRect(0,0,500,500);//清空画布
var date=new Date();
var hours=date.getHours();
var minutes=date.getMinutes();
var seconds=date.getSeconds();
hours=hours+minutes/60;
hours=hours>12?hours-12:hours;
cxt.beginPath();
// cxt.fillStyle="#33B5E5";
cxt.arc(250,250,200,0,2*Math.PI,false);
cxt.lineWidth=7;
cxt.stroke();
cxt.closePath();
for(var i=0;i<12;i++){
cxt.save(); //保存清空
cxt.translate(250,250); //本来以页面头为圆心上面平移下来
cxt.rotate(i*30*Math.PI/180);
cxt.beginPath();
// cxt.fillStyle="#33B5E5";
cxt.moveTo(0,200);
cxt.lineTo(0,185);
cxt.closePath();
cxt.stroke();
cxt.restore(); //保存清空(对立的)
}
for(var j=0;j<60;j++){
cxt.save();
cxt.translate(250,250);
cxt.rotate(j*6*Math.PI/180);
cxt.beginPath();
// cxt.fillStyle="#33B5E5";
cxt.moveTo(0,200);
cxt.lineTo(0,190);
cxt.lineWidth=2;
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//表心
cxt.beginPath();
// cxt.translate(250,250);
cxt.arc(250,250,7,0,2*Math.PI,false);
cxt.closePath();
cxt.fillStyle="#33B5E5";
cxt.fill();
//时针
cxt.save();
cxt.translate(250,250);
cxt.rotate(hours*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-90);
cxt.lineTo(0,-3);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
cxt.translate(250,250);
cxt.rotate(minutes*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-130);
cxt.lineTo(0,-3);
cxt.lineWidth=3;
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒针
cxt.save();
cxt.translate(250,250);
cxt.rotate(seconds*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-150);
cxt.lineTo(0,-3);
cxt.lineWidth=2;
cxt.closePath();
cxt.stroke();
cxt.restore();
// cxt.arc(0,-120,4,0,360,false);
// cxt.fillStyle="red";
// cxt.closePath();
// cxt.fill();
// cxt.restore();
}
showTime();
setInterval(showTime,1000);
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="500px" height="500px" >
您的浏览器不兼容
</canvas>
<script>
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
function showTime(){
cxt.clearRect(0,0,500,500);//清空画布
var date=new Date();
var hours=date.getHours();
var minutes=date.getMinutes();
var seconds=date.getSeconds();
hours=hours+minutes/60;
hours=hours>12?hours-12:hours;
cxt.beginPath();
// cxt.fillStyle="#33B5E5";
cxt.arc(250,250,200,0,2*Math.PI,false);
cxt.lineWidth=7;
cxt.stroke();
cxt.closePath();
for(var i=0;i<12;i++){
cxt.save(); //保存清空
cxt.translate(250,250); //本来以页面头为圆心上面平移下来
cxt.rotate(i*30*Math.PI/180);
cxt.beginPath();
// cxt.fillStyle="#33B5E5";
cxt.moveTo(0,200);
cxt.lineTo(0,185);
cxt.closePath();
cxt.stroke();
cxt.restore(); //保存清空(对立的)
}
for(var j=0;j<60;j++){
cxt.save();
cxt.translate(250,250);
cxt.rotate(j*6*Math.PI/180);
cxt.beginPath();
// cxt.fillStyle="#33B5E5";
cxt.moveTo(0,200);
cxt.lineTo(0,190);
cxt.lineWidth=2;
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//表心
cxt.beginPath();
// cxt.translate(250,250);
cxt.arc(250,250,7,0,2*Math.PI,false);
cxt.closePath();
cxt.fillStyle="#33B5E5";
cxt.fill();
//时针
cxt.save();
cxt.translate(250,250);
cxt.rotate(hours*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-90);
cxt.lineTo(0,-3);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
cxt.translate(250,250);
cxt.rotate(minutes*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-130);
cxt.lineTo(0,-3);
cxt.lineWidth=3;
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒针
cxt.save();
cxt.translate(250,250);
cxt.rotate(seconds*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-150);
cxt.lineTo(0,-3);
cxt.lineWidth=2;
cxt.closePath();
cxt.stroke();
cxt.restore();
// cxt.arc(0,-120,4,0,360,false);
// cxt.fillStyle="red";
// cxt.closePath();
// cxt.fill();
// cxt.restore();
}
showTime();
setInterval(showTime,1000);
</script>
</body>
</html>