var canvasText = document.getElementsByTagName("canvas")[0].getContext("2d");
var shizhong = function() {
    //清除画布
    canvasText.clearRect(0, 0, 1300, 600);
//				var imgNode = document.getElementById("beijing")
//				canvasText.drawImage(imgNode,0,0,1300,600,0,0,1300,600);
    var a = canvasText.createLinearGradient(200, 0, 0, 400);
    a.addColorStop("0", "red");
    a.addColorStop("0.2", "orange");
    a.addColorStop("0.4", "yellow");
    a.addColorStop("0.6", "green");
    a.addColorStop("0.8", "blue");
    a.addColorStop("1", "purple");
    canvasText.save();
    canvasText.fillStyle = a;
    canvasText.beginPath();
    canvasText.arc(650, 300, 200, 0, 360, false);
    canvasText.fill();
    canvasText.closePath();
    canvasText.restore();
    //外圈
    canvasText.strokeStyle = "fuchsia";
    canvasText.lineWidth = 10;
    canvasText.beginPath();
    canvasText.arc(650, 300, 200, 0, Math.PI * 2, true);
    canvasText.closePath();
    canvasText.stroke();
    //时间
    var now = new Date();
    var s = now.getSeconds();
    var m = now.getMinutes();
    var h = now.getHours();
    h = h + m / 60;
    h = (h > 12) ? (h - 12) : h;
    //时刻度
    for (i = 0; i < 12; i++) {
        canvasText.save();
        canvasText.lineWidth = 7;
        canvasText.strokeStyle = "yellow"
        canvasText.translate(650, 300)
        canvasText.rotate(i * 30 * Math.PI / 180);
        canvasText.beginPath();
        canvasText.moveTo(0, -170);
        canvasText.lineTo(0, -191);
        canvasText.stroke();
        canvasText.closePath();
        canvasText.restore();
    }
    //秒刻度
    for (i = 0; i < 60; i++) {
        canvasText.save();
        canvasText.lineWidth = 5;
        canvasText.strokeStyle = "green";
        canvasText.translate(650, 300);
        canvasText.rotate(i * 6 * Math.PI / 180);
        canvasText.beginPath();
        canvasText.moveTo(0, -180);
        canvasText.lineTo(0, -190);
        canvasText.stroke();
        canvasText.closePath();
        canvasText.restore();
    }
    //数字
    canvasText.font = '30px 黑体';
    canvasText.fillStyle = 'black';
    canvasText.textAlign = 'center';
    canvasText.textBaseline = 'middle';
    for (var n = 1; n <= 12; n++) {
        var theta = (n - 3) * (Math.PI * 2) / 12;
        var x = 250 * 0.61 * Math.cos(theta);
        var y = 250 * 0.61 * Math.sin(theta);
        canvasText.save();
        canvasText.lineWidth = 5;
        canvasText.translate(650, 300);
        canvasText.beginPath();
        canvasText.fillText(n, x, y);
        canvasText.closePath();
        canvasText.restore();
    }
    canvasText.save();
    //时针
    canvasText.lineWidth = 10;
    //设置时针的颜色
    canvasText.strokeStyle = "black";
    //设置表心空间的0,0点
    canvasText.translate(650, 300);
    //设置旋转的角度
    canvasText.rotate(h * 30 * Math.PI / 180);
    //开始绘制
    canvasText.beginPath();
    canvasText.moveTo(0, -100);
    canvasText.lineTo(0, 10);
    canvasText.stroke();
    canvasText.closePath();
    canvasText.restore();
    //分针
    canvasText.save();
    //设置分针的风格
    canvasText.lineWidth = 5;
    canvasText.strokeStyle = "black";
    //设置表心空间分针画布的圆心
    canvasText.translate(650, 300);
    //设置旋转角度
    canvasText.rotate(m * 6 * Math.PI / 180);
    //开始绘制
    canvasText.beginPath();
    canvasText.moveTo(0, -140);
    canvasText.lineTo(0, 15);
    canvasText.stroke();
    canvasText.closePath();
    canvasText.restore();
    //秒针
    canvasText.save();
    //设置秒针的风格
    canvasText.lineWidth = 3;
    canvasText.strokeStyle = 'red';
    //设置表心分针画布的圆心
    canvasText.translate(650, 300);
    //设置旋转角度
    canvasText.rotate(s * 6 * Math.PI / 180);
    //绘制秒针
    canvasText.beginPath();
    canvasText.moveTo(0, -170);
    canvasText.lineTo(0, 20);
    canvasText.stroke();
    canvasText.closePath();
    //画出时针，分针，秒针的交叉点
    canvasText.beginPath();
    canvasText.arc(0, 0, 5, 0, 360, false);
    //设置填充样式
    canvasText.fillStyle = "gold";
    canvasText.fill();
    //设置笔触样式(秒针已设置)
    canvasText.stroke();
    canvasText.closePath();

    //设置秒针前段的小圆点
    canvasText.beginPath();
    canvasText.arc(0, -150, 5, 0, 360, false);
    //设置填充样式
    canvasText.fillStyle = "gold";
    canvasText.fill();
    //设置笔触样式(秒针已设置)
    canvasText.stroke();
    canvasText.closePath();

    canvasText.restore();
}
shizhong();
setInterval("shizhong()", 1000);