好久没更新播客了。

最近忙着学校里头的事儿，各种作业。只怪当年数学没学好，很多课程都不怎么应付的过来。还要好好学Linux。还有很久以前就想好好学的HTML5，结果因为拖延症一直拖着没学。乘着这次Web交互设计、数据可视化一定好好学一下~

然后博客源码也没有更新，头都大了。现在先将就的话，估计以后可能就会将就下去了喔…

刚刚看了canvas简单拿的画图后，写了一个很简单的时钟。就贴上来吧。

Draw、drawDial、drawHourHand、drawMinuteHand、drawSecondHand几个方法。Draw负责每秒提供参数，调用其它方法绘图，其他四个方法分别负责画表盘、时针、分针、秒针。

哈哈~够丑吧~~

html中的canvas标签(原谅中间的英文)：

<canvas id="clock" width="500" height="500">Your brower does not ......</canvas>

draw方法：

function draw(){
	var date=new Date();
	var hour=date.getHours()%12;
	var minute=date.getMinutes();
	var second=date.getSeconds();
	context.clearRect(0,0,500,500);
	
	drawDial();			
	drawHourHand((hour+minute/60)/12*Math.PI*2);
	drawMinuteHand((minute+second/60)/60*Math.PI*2);
	drawSecondHand(second/60*Math.PI*2);
}

drawDial方法

function drawDial(){
	context.beginPath();
	context.lineWidth=5;
	context.strokeStyle="blue";
	context.arc(250,250,200,0,Math.PI*2,true);
	context.stroke();
	context.closePath();
	
	context.strokeStyle="black";
	context.lineWidth=4;
	for(var i=1;i<13;i++){
		context.save();
		
		context.beginPath();
		context.translate(250,250);
		context.rotate(i/12*Math.PI*2);
		
		context.moveTo(0,-180);
		context.lineTo(0,-200);
		
		context.stroke();
		context.closePath();	
		
		context.restore();
	}
	
	context.lineWidth=2;
	for(var i=1;i<61;i++){
		context.save();
		
		context.beginPath();
		context.translate(250,250);
		context.rotate(i/60*Math.PI*2);
		
		context.moveTo(0,-180);
		context.lineTo(0,-190);
		
		context.stroke();
		context.closePath();	
		
		context.restore();
	}
}

    三个指针的方法：

function drawHourHand(angle){
	//时针
	context.lineWidth=4;
	context.save();
	
	context.translate(250,250);
	context.rotate(angle);
	
	context.beginPath();
	context.moveTo(0,3);
	context.lineTo(0,-130);
	context.stroke();
	context.closePath();
	
	context.restore();
}
function drawMinuteHand(angle){
	//分针
	context.lineWidth=3;
	context.save();
	
	context.translate(250,250);
	context.rotate(angle);
	
	context.beginPath();
	context.moveTo(0,4);
	context.lineTo(0,-150);
	context.stroke();
	context.closePath();
	
	context.restore();
}
function drawSecondHand(angle){
	//秒针
	context.lineWidth=2;
	context.save();
	
	context.translate(250,250);
	context.rotate(angle);
	
	context.beginPath();
	context.moveTo(0,5);
	context.lineTo(0,-160);
	context.stroke();
	context.closePath();
	
	context.restore();
}

    因为很简单，就不放下载了~~就这样子吧。嘿嘿。

    发现编辑器无法使用shift+tab缩进....这是一个问题....