canvas 绘制圆形时钟的教程

 

 div{

 text-align: center;

 margin-top: 250px;

 }

 #clock{

 border: 1px solid #ccc;

 }

 var dom=document.getElementById("clock");

   var ctx=dom.getContext("2d");

var width=ctx.canvas.width;

var heigth=ctx.canvas.height;

var r=width/2;

//描绘时分秒小数和小数点

function drawBackground(){

 ctx.save();

 ctx.translate(r,r); //中心原点位置

 ctx.beginPath(); //起始位置

 ctx.lineWidth=10;

 //圆

 ctx.arc(0,0,r-5,0,2*Math.PI,false);

 ctx.stroke();

 var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];

 ctx.font="18px Arial";

 ctx.textAlign="center";

 ctx.textBaseline="middle";

 hourNumbers.forEach(function(number,i){

 var rad=2*Math.PI/12*i;

 var x=Math.cos(rad)*(r-30);

 var y=Math.sin(rad)*(r-30);

 ctx.fillText(number,x,y);

 });

 for (var i=0;i<60;i++) {

 varrad=2*Math.PI/60*i;

 varx=Math.cos(rad)*(r-18);

 vary=Math.sin(rad)*(r-18);

 ctx.beginPath();

 if(i%5===0){

 ctx.fillStyle="#000";

 ctx.arc(x,y,2,2*Math.PI,false);

 }else{

 ctx.fillStyle="#ccc";

 ctx.arc(x,y,2,2*Math.PI,false);

 }

 ctx.fill();

 }

}

//描绘时针

function drawHour(hour,minute){

 ctx.save();

 ctx.beginPath();

 varrad=2*Math.PI / 12 * hour;

 varmrad=2*Math.PI / 12 / 60 * minute;

 ctx.rotate(rad + mrad);

 ctx.lineWidth=6;

 ctx.lineCap="round";

 ctx.moveTo(0,10);

 ctx.lineTo(0,-r/2);

 ctx.stroke();

 ctx.restore();

}

//描绘分针

function drawMinute(minute){

 ctx.save();

 ctx.beginPath();

 varrad=2*Math.PI/60*minute;

 ctx.rotate(rad);

 ctx.lineWidth=3;

 ctx.lineCap="round";

 ctx.moveTo(0,10);

 ctx.lineTo(0,-r+30);

 ctx.stroke();

 ctx.restore();

}

//描绘秒针

function drawSecond(second){

 ctx.save();

 ctx.beginPath();

 ctx.fillStyle="#C14543";

 varrad=2*Math.PI/60*second;

 ctx.rotate(rad);

 ctx.moveTo(-2,20);

 ctx.lineTo(2,20);

 ctx.lineTo(1,-r+18);

 ctx.lineTo(-1,-r+18)

 ctx.fill();

 ctx.restore();

}

//中间固定园点

function drawDot(){

 ctx.beginPath();

 ctx.fillStyle="#fff";

 ctx.arc(0,0,3,0,2*Math.PI,false);

 ctx.fill();

}

function draw(){

 ctx.clearRect(0,0,width,heigth);

 varnow=newDate();

 varhour=now.getHours();

 varminute=now.getMinutes();

 varsecond=now.getSeconds();

 drawBackground();

 drawHour(hour,minute);

 drawMinute(minute);

 drawSecond(second);

 drawDot();

 ctx.restore();

}

draw();

setInterval(draw,1000)