canvas编写时钟

var dum=document.getElementById('clock');
var ctx=dum.getContext('2d');//获取上下文context文件
var width=ctx.canvas.width;//获取宽度
var heigth=ctx.canvas.height;//获取高度
var r=width/2;//获取半径
var rem=width/200;//当时钟改变大小时，不影响其大小比例的参数
/*var img=document.getElementById("tulip");
 ctx.drawImage(img,0,0);
*/
//定义画圆的函数方法
function drawBackground(){
	ctx.save();
	ctx.translate(r,r);//获取圆心坐标
	ctx.beginPath();
    ctx.lineWidth=10 * rem;//设置线的粗细
    ctx.fillStyle='blue';
    ctx.linec
    ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,false);
    //圆的的中心点坐标x=0,y=0,圆的半径，起始角（弧度），结束角（弧度），可选参数：false=顺时针，true=逆时针
    ctx.stroke();//开始绘制
    
    
    
    var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
	ctx.font=18 * rem+'px 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* rem);//起始点X坐标
		var y=Math.sin(rad)*(r-30* rem);//起始点y坐标
		ctx.fillText(number,x,y);
	});
	
	//设置秒点数，进行遍历
	for (var i=0;i<60;i++) {
		var rad=2*Math.PI/60*i;//60秒个秒点
		var x=Math.cos(rad)*(r-18 * rem);//每个秒点的x坐标，r-18的意思就是半径稍微比数字的半径大一点，但小于圆的半径
		var y=Math.sin(rad)*(r-18 * rem);
		 ctx.beginPath();
		 
		 //如果是小时让其为红色，不是为灰色
		 if(i % 5== 0){
		 	ctx.fillStyle='red';
		 	ctx.arc(x,y,2 * rem,0,2*Math.PI,false);
		 }else{
		 	ctx.fillStyle='#000';
		 	ctx.arc(x,y,2 * rem,0,2*Math.PI,false);
		 }
		 ctx.fill();
	}
}

//画时针
function drawHour(hour,minute){
	
	ctx.save();//保存画小时的过程
	ctx.beginPath();
	var rad=2*Math.PI/12*hour;
	var mrad =2*Math.PI/12/60*minute;
	ctx.rotate(rad+mrad);//旋转的弧度
	ctx.lineWidth=6 * rem;//时针的宽
	ctx.lineCap='round';//时针的线条变为圆角
	ctx.fillStyle='red'
	ctx.moveTo(0,10 * rem);//时针的中心端点坐标
	ctx.lineTo(0,-r/2);
	ctx.stroke();
	ctx.restore();//还原画小时之前的状态
}
//画分针
function drawMinute(minute){
	ctx.save();//保存画分钟的过程
	ctx.beginPath();
	var rad=2*Math.PI/60 * minute;
	ctx.rotate(rad);
	ctx.lineWidth=3 * rem;//时针的宽
	ctx.lineCap='round';//时针的线条变为圆角
	ctx.moveTo(0,10 * rem);//时针的中心端点坐标
	ctx.lineTo(0,-r+30 * rem);
	ctx.fillStyle='yellow';
	ctx.stroke();
	ctx.restore();//还原画分钟之前的状态
}


//画秒针
function drawSecond(second){
	ctx.save();//保存画秒针的过程
	ctx.beginPath();
	ctx.fillStyle='#c14543';
	var rad=2*Math.PI/60 * second;
	ctx.rotate(rad);
	ctx.moveTo(-2 * rem,20 * rem);//秒针的中心端点坐标
	ctx.lineTo(2 * rem,20 * rem);
	ctx.lineTo(1 * rem,-r+18 * rem);
	ctx.lineTo(-1 * rem,-r+18 * rem);
	ctx.fill();
	ctx.restore();//还原画秒针之前的状态
}

//中心点的方法
function drawDot(){
	ctx.beginPath();
	ctx.fillStyle='#fff';
	ctx.arc(0,0,3 * rem,0,2*Math.PI,false);//先画圆，
	ctx.fill();//再填充
}

//让小时、分钟、秒针动态运行
function draw(){
	ctx.clearRect(0,0,width,heigth);//清除之前的冗余
	var now=new Date( );//获取当前时间
	var hour=now.getHours();//获取小时
	var minute=now.getMinutes();//获取分钟
	var second=now.getSeconds(); //获取秒
	drawBackground();
	drawHour(hour,minute);
	drawMinute(minute);
	drawSecond(second);
	drawDot();
	ctx.restore(); 
}
//调用方法;
draw();
setInterval(draw,1000);//调用setInterval函数，每一秒执行一次