canvas 二 canvas绘制表盘，及canvas曲线的绘制

/**
* 绘制圆
* 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);