/**
 * 繪製圓
 * arc(x,y,半徑,起始弧度，結束弧度,旋轉方向)
 * 		x,y起始位置
 * 		弧度與角度的關係 : 弧度 = 角度*Math.PI/180
 * 		旋轉方向:順時針(預設false)、逆時針(true)
 */
var oc = document.getElementById('canvas');
var ogc = oc.getContext('2d');
//例項1繪製扇形
ogc.moveTo(200,200);
ogc.arc(200,200,150,0,90*Math.PI/180,false);
ogc.arc(200,200,150,0,90*Math.PI/180,true);
ogc.stroke();
//canvas錶盤
function toDraw(){
	var x = 200;
	var y = 200;
	var r = 150;
	//9每次執行時清空畫布
	ogc.clearRect(0,0,oc.width,oc.height);
	//8獲取時間
	var oDate = new Date();
	var oHours = oDate.getHours();
	var oMin = oDate.getMinutes();
	var oSec = oDate.getSeconds();
	var oHoursValue = (-90+oHours*30 + oMin/2)*Math.PI/180; 
	var oMinvalue = (-90+oMin*6)*Math.PI/180;
	var oSecvalue = (-90+oSec*6)*Math.PI/180;
	/*ogc.moveTo(x,y);
	ogc.arc(x,y,r,0,6*Math.PI/180,false);

	ogc.moveTo(x,y);
	ogc.arc(x,y,r,6*Math.PI/180,12*Math.PI*180,true)*/
	//1繪製錶盤
	ogc.beginPath();

	for(var i=0;i<60;i++){
		ogc.moveTo(x,y);
		ogc.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);

	}
	ogc.closePath();
	ogc.stroke();
	//2去掉圓點到刻度的線條,畫圓並填充顏色覆蓋
	ogc.fillStyle = 'white';
	ogc.beginPath();
	ogc.moveTo(x,y);
	ogc.arc(x,y,r*19/20,0,360*Math.PI/180,false);
	ogc.closePath();
	ogc.fill();
	//3繪製時針刻度
	ogc.beginPath();
	ogc.lineWidth=2;
	for(var i=0;i<12;i++){
		ogc.moveTo(x,y);
		ogc.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);

	}
	ogc.closePath();
	ogc.stroke();
	//4去掉時針刻度的線條,畫圓並填充顏色覆蓋
	ogc.fillStyle = 'white';
	ogc.beginPath();
	ogc.moveTo(x,y);
	ogc.arc(x,y,r*18/20,0,360*Math.PI/180,false);
	ogc.closePath();
	ogc.fill();
	//5繪製時針
	ogc.beginPath();
	ogc.lineWidth = 5;
	ogc.moveTo(x,y);
	ogc.arc(x,y,r*8/20,oHoursValue,oHoursValue,false);
	ogc.closePath();
	ogc.stroke();
	// 6繪製分針
	ogc.beginPath();
	ogc.lineWidth = 3;
	ogc.moveTo(x,y);
	ogc.arc(x,y,r*12/20,oMinvalue,oMinvalue,false);
	ogc.closePath();
	ogc.stroke();
	// 7繪製秒針
	ogc.beginPath();
	ogc.lineWidth = 2;
	ogc.moveTo(x,y);
	ogc.arc(x,y,r*16/20,oSecvalue,oSecvalue,false);
	ogc.closePath();
	ogc.stroke();
	
}
toDraw();
setInterval(function(){
	toDraw();
},1000);
/////////////////////////////////////////
/**
 * 繪製曲線
 * artTo(x1,y1,x2,y2,r);
 * 		x1,y1第一組座標
 * 		x2,y2第二組座標
 * 		r:半徑
 *貝塞爾曲線
 * quadraticCurveTo(dx,dy,x1,y1)
 * 		貝塞爾曲線：第一組控制點，第二組控制點
 * bezierCurveTo()
 * 		貝塞爾曲線：第一組控制點，第二組控制點，第三組結束點
 *
 * canvas變換
 * translate,rotate,scale
 */
ogc.moveTo(100,200);
ogc.arcTo(100,100,200,100,50);
ogc.stroke();
//quadraticCurveTo
ogc.moveTo(100,200);
ogc.quadrativCurveTo(100,200);
ogc.stroke();
//bezierCurzeTo
ogc.moveTo(100,200);
ogc.bezierCurveTo(100,100,200,200,200,100);
ogc.stroke();		

//canvas變換
ogc.translate(100,100);
ogc.rotate(45*Math.PI/180);
ogc.scale(2,1);
ogc.fillRect(0,0,100,100);