<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CANVAS时钟</title>
<style>
div{
margin: 0 auto;
width:500px;
height: 500px;
}
body{
/*background: url(img/u0.jpg) no-repeat center;
-webkit-background-size: cover;
background-size: cover;*/
} +
</style> </head>
<body>
<div>
<img src="img/u0.jpg" style="display: none;">
<canvas id="canvas" width="500" height="500"></canvas>
</div> </body>
<script>
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d"); function clock(){ var date=new Date();
var hour=date.getHours();
var min=date.getMinutes();
var sec=date.getSeconds();
hour=hour>24?hour-12:hour;
min=min<10?"0"+min:min;
sec=sec<10?"0"+sec:sec;
cxt.clearRect(0,0,canvas.width,canvas.height); //圆
cxt.strokeStyle="#00ffff";
cxt.lineWidth=1;
cxt.beginPath();
cxt.arc(250,250,200,0,2*Math.PI,true);
var img=new Image();
img.src="img/h.jpg"; cxt.clip();
cxt.drawImage(img,0,0,500,500);
cxt.stroke();
cxt.restore();
cxt.save();
cxt.translate(250,250);
cxt.strokeStyle="fuchsia";
cxt.lineWidth=7;
//画时针
for (var i=0;i<12;i++) {
cxt.rotate(30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-195);
cxt.lineTo(0,-175);
cxt.closePath();
cxt.stroke();
}
cxt.restore();
cxt.save();
cxt.translate(250,250);
cxt.strokeStyle="#ffff00";
cxt.lineWidth=5;
//分针
for (var i=0;i<60;i++) {
cxt.rotate(6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-195);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke(); }
//时针
cxt.restore();
cxt.save();
cxt.lineWidth=7;
cxt.strokeStyle="mediumorchid";
cxt.translate(250,250);
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-130);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="#fff00";
cxt.translate(250,250);
cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-150);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒针
cxt.save();
cxt.lineWidth=3;
cxt.strokeStyle="#ff0000";
cxt.translate(250,250);
cxt.rotate(sec*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke(); cxt.beginPath();
cxt.arc(0,0,7,0,2*Math.PI,true);
cxt.closePath();
cxt.strokeStyle="ff0000";
cxt.fillStyle="#ffff00";
cxt.fill();
cxt.stroke(); cxt.beginPath();
cxt.arc(0,-140,7,0,2*Math.PI,true);
cxt.closePath();
cxt.strokeStyle="ff0000";
cxt.fillStyle="#ffff00";
cxt.fill();
cxt.stroke();
cxt.restore(); cxt.save();
cxt.beginPath();
var time = hour+":"+min+":"+sec;
cxt.font="18px 微软雅黑";
cxt.textAlign="center";
cxt.fillStyle="darkorchid";
cxt.fillText(time,250,400);
cxt.restore(); } clock(); setInterval(clock,1000); </script>
</html>