canvas时钟

var oc = document.getElementById("c1");

var ogc = oc.getContext("2d");

function toDraw() {

var x= 200;

var y= 200;

var r= 150;

ogc.clearRect(0,0,oc.width,oc.height);//每次清空画布

    var oDate= new Date();

var oHours= oDate.getHours();

var oMin= oDate.getMinutes();

var oSec= oDate.getSeconds();

//

    var oHoursValue= (-90 + oHours* 30 + oMin/ 2 + oSec/ 120)* Math.PI/ 180;

var oMinValue= (-90 + oMin* 6 + oSec/ 10)* Math.PI/ 180;

var oSecValue= (-90 + oSec* 6)* Math.PI/ 180;

// 绘制表盘  每格角度 360/60=6°  角度*π/180 = 弧度

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

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

ogc.beginPath();

ogc.lineWidth= 3;

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

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

ogc.lineWidth= 5;

ogc.beginPath();

ogc.moveTo(x, y);

ogc.arc(x, y, r* 10 / 20, oHoursValue, oHoursValue,false);

ogc.closePath();

ogc.stroke();

ogc.lineWidth= 3;

ogc.beginPath();

ogc.moveTo(x, y);

ogc.arc(x, y, r* 15 / 20, oMinValue, oMinValue,false);

ogc.closePath();

ogc.stroke();

ogc.lineWidth= 1;

ogc.beginPath();

ogc.moveTo(x, y);

ogc.arc(x, y, r* 19 / 20, oSecValue, oSecValue,false);

ogc.closePath();

ogc.stroke();

}

setInterval(function () {

toDraw();

},1000);