1、页面布局
#clock{
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();
5、效果图
6、环形进度条
var wrapper = document.getElementById("progress"); var can = document.createElement("canvas"); var ctx = can.getContext("2d"); can.width = 500; can.height = 500; wrapper.appendChild(can); var opt = { num:100, per:0.5 } var start = 135;//开始位置 var end = 360+45;//结束位置 var deg = (start - end)/(opt.num-1); for (var i = 0; i < opt.num; i++){ ctx.save(); ctx.lineWidth = 5; ctx.strokeStyle = 'lightgray'; ctx.translate(250,250); ctx.rotate((start+90-deg*i)*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,-200); ctx.lineTo(0,-175); ctx.stroke(); ctx.closePath(); ctx.restore(); } function draw(index){ ctx.save(); ctx.lineWidth = 5; ctx.strokeStyle = 'deepskyblue'; ctx.translate(250,250); ctx.rotate((start+90-deg*index)*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,-200); ctx.lineTo(0,-175); ctx.stroke(); ctx.closePath(); ctx.restore(); } function animated(index,time){ if (opt.per === 0)return; draw(index); var timer = setTimeout(function(){ index++; if(index >= opt.num*opt.per){ clearTimeout(timer); } else { if (index >= opt.num*opt.per-10){ animated(index,time+20); } else { animated(index,time); } } },time); } animated(0,10);
7、效果图
8、总结
其实时钟跟环形统计原理差不多，可以尝试把时钟和环形统计写成插件那就更完美了。