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

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

var width=ctx.canvas.width;

var height=ctx.canvas.height;

var r=width/2;

function drawBackground(){

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);

})；

}

drawBackground();