1、页面布局
#clock{
width: 500px;
height: 500px;
position: relative;
background-color: yellow;
}
#clock canvas{
position: absolute;
top: 0;
left: 0;
}
<div id="clock"></div>
2、绘制时钟刻度
var clock = document.getElementById("clock"); var scale = document.createElement("canvas"); var scale_ctx = scale.getContext("2d"); scale.width = 500; scale.height = 500; clock.appendChild(scale); //绘制圈 scale_ctx.beginPath(); scale_ctx.strokeStyle = ‘blue‘ scale_ctx.lineWidth = 5; scale_ctx.arc(250,250,200,0,2*Math.PI,false); scale_ctx.stroke(); scale_ctx.closePath(); //绘制刻度 for (var i = 0; i < 12; i++){ scale_ctx.save(); scale_ctx.beginPath(); scale_ctx.strokeStyle = ‘black‘; scale_ctx.lineWidth = 7; scale_ctx.translate(250,250); scale_ctx.rotate(i*30*Math.PI/180); scale_ctx.moveTo(0,-170); scale_ctx.lineTo(0,-190); scale_ctx.stroke(); scale_ctx.closePath(); scale_ctx.restore(); } for (var i = 0; i < 60; i++){ scale_ctx.save(); scale_ctx.beginPath(); scale_ctx.strokeStyle = ‘black‘; scale_ctx.translate(250,250); scale_ctx.rotate(i*6*Math.PI/180); scale_ctx.moveTo(0,-180); scale_ctx.lineTo(0,-190); scale_ctx.stroke() scale_ctx.closePath(); scale_ctx.restore(); }
3、绘制时针，分针，秒针
var hands = document.createElement("canvas"); var hands_ctx = hands.getContext("2d"); hands.width = 500; hands.height = 500; clock.appendChild(hands); //绘制时针 hands_ctx.save(); hands_ctx.lineWidth = 7; hands_ctx.strokeStyle = ‘black‘; hands_ctx.translate(250,250); hands_ctx.rotate(30*Math.PI/180); hands_ctx.beginPath(); hands_ctx.moveTo(0,-140); hands_ctx.lineTo(0,10); hands_ctx.stroke(); hands_ctx.closePath(); hands_ctx.restore(); //绘制分针 hands_ctx.save(); hands_ctx.lineWidth = 5; hands_ctx.strokeStyle = ‘black‘; hands_ctx.translate(250,250); hands_ctx.rotate(0*Math.PI/180); hands_ctx.beginPath(); hands_ctx.moveTo(0,-150); hands_ctx.lineTo(0,15); hands_ctx.stroke(); hands_ctx.closePath(); hands_ctx.restore(); //绘制秒针 hands_ctx.save(); hands_ctx.lineWidth = 3; hands_ctx.strokeStyle = "red"; hands_ctx.translate(250,250); hands_ctx.rotate(50*Math.PI/180); hands_ctx.beginPath(); hands_ctx.moveTo(0,-185); hands_ctx.lineTo(0,20); hands_ctx.stroke(); hands_ctx.restore(); hands_ctx.closePath(); //绘制交叉点 hands_ctx.save(); hands_ctx.translate(250,250); hands_ctx.beginPath(); hands_ctx.lineWidth = 2; hands_ctx.strokeStyle = ‘red‘; hands_ctx.fillStyle = ‘white‘; hands_ctx.arc(0,0,5,0,2*Math.PI,false); hands_ctx.fill(); hands_ctx.stroke(); hands_ctx.closePath(); hands_ctx.restore(); //装饰秒针 hands_ctx.save(); hands_ctx.translate(250,250); hands_ctx.rotate(50*Math.PI/180); hands_ctx.lineWidth = 2; hands_ctx.strokeStyle = ‘red‘; hands_ctx.fillStyle = ‘white‘; hands_ctx.beginPath(); hands_ctx.arc(0,-150,5,0,2*Math.PI,false); hands_ctx.fill(); hands_ctx.stroke(); hands_ctx.closePath(); hands_ctx.restore();
4、绘制动态时钟
var hands = document.createElement("canvas"); var hands_ctx = hands.getContext("2d"); hands.width = 500; hands.height = 500; clock.appendChild(hands); function drawClock(){ hands_ctx.clearRect(0,0,hands.width,hands.height); var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var sec = now.getSeconds(); hour += hour + minute/60; hour = hour>12?hour-12:hour; //绘制时针 hands_ctx.save(); hands_ctx.lineWidth = 7; hands_ctx.strokeStyle = ‘black‘; hands_ctx.translate(250,250); hands_ctx.rotate(hour*30*Math.PI/180); hands_ctx.beginPath(); hands_ctx.moveTo(0,-140); hands_ctx.lineTo(0,10); hands_ctx.stroke(); hands_ctx.closePath(); hands_ctx.restore(); //绘制分针 hands_ctx.save(); hands_ctx.lineWidth = 5; hands_ctx.strokeStyle = ‘black‘; hands_ctx.translate(250,250); hands_ctx.rotate(minute*6*Math.PI/180); hands_ctx.beginPath(); hands_ctx.moveTo(0,-150); hands_ctx.lineTo(0,15); hands_ctx.stroke(); hands_ctx.closePath(); hands_ctx.restore(); //绘制秒针 hands_ctx.save(); hands_ctx.lineWidth = 3; hands_ctx.strokeStyle = "red"; hands_ctx.translate(250,250); hands_ctx.rotate(sec*6*Math.PI/180); hands_ctx.beginPath(); hands_ctx.moveTo(0,-185); hands_ctx.lineTo(0,20); hands_ctx.stroke(); hands_ctx.restore(); hands_ctx.closePath(); //绘制交叉点 hands_ctx.save(); hands_ctx.translate(250,250); hands_ctx.beginPath(); hands_ctx.lineWidth = 2; hands_ctx.strokeStyle = ‘red‘; hands_ctx.fillStyle = ‘white‘; hands_ctx.arc(0,0,5,0,2*Math.PI,false); hands_ctx.fill(); hands_ctx.stroke(); hands_ctx.closePath(); hands_ctx.restore(); //装饰秒针 hands_ctx.save(); hands_ctx.translate(250,250); hands_ctx.rotate(sec*6*Math.PI/180); hands_ctx.lineWidth = 2; hands_ctx.strokeStyle = ‘red‘; hands_ctx.fillStyle = ‘white‘; hands_ctx.beginPath(); hands_ctx.arc(0,-150,5,0,2*Math.PI,false); hands_ctx.fill(); hands_ctx.stroke(); hands_ctx.closePath(); hands_ctx.restore(); } setInterval(drawClock,1000); drawClock();
原文：http://www.cnblogs.com/sonwrain/p/6264472.html
