一个简易时钟

一个简易时钟

//获取canvas
var canvas = document.querySelector("canvas");
//创建context对象
var ctx = canvas.getContext("2d");
function timer(){
    //清空已有的内容
    ctx.clearRect(0,0,510,510);
    //开始路径绘制
    ctx.beginPath();
    //绘制圆形路径
    ctx.arc(255,255,250,0,Math.PI*2,false);
    //结束路径
    ctx.closePath();
    //设置圆形的颜色
    ctx.strokeStyle = "black";
    //设置线条粗细
    ctx.lineWidth = 5;
    //根据路径绘制图形
    ctx.stroke();
    //保存画布未移动的状态
    ctx.save();
    //将画布原点移动到圆心
    ctx.translate(255,255);
    //循环画时针刻度
    for(var i = 0; i < 12; i++){
        //保存
        ctx.save();
        //先旋转画布(30°)
        // ctx.rotate(30*Math.PI/180);
        ctx.rotate(i*Math.PI/180*30);
        ctx.beginPath();
        ctx.moveTo(250,0);
        ctx.lineTo(230,0);
        ctx.closePath();
        //设置线端为圆形
        ctx.lineCap = "round";
        ctx.stroke();
        ctx.restore();
    }
    //循环分针刻度
    for(var j = 0; j < 60; j++){
        //每次旋转6°
        ctx.rotate(6*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(250,0);
        ctx.lineTo(240,0);
        ctx.closePath();
        ctx.lineWidth = 3;
        ctx.stroke();
    }
    //获取当前时间
    var date = new Date();
    //获取小时
    var hours = date.getHours();
    //获取分钟
    var minutes = date.getMinutes();
    //获取秒数
    var seconds = date.getSeconds();
    //画时针
    ctx.save();
    //根据时间获取时针旋转的角度
    ctx.rotate(Math.PI/180*hours*30-0.5*Math.PI+30/60*Math.PI/180*minutes);
    ctx.beginPath();
    ctx.moveTo(120,0);
    ctx.lineTo(-15,0);
    ctx.closePath();
    ctx.lineWidth = 5;
    ctx.stroke();
    ctx.restore();
    //画分针
    ctx.save();
    //根据时间获取分针旋转的角度
    ctx.rotate(minutes*(Math.PI/180)*6-0.5*Math.PI);
    ctx.beginPath();
    ctx.moveTo(170,0);
    ctx.lineTo(-15,0);
    ctx.closePath();
    ctx.lineWidth = 3;
    ctx.stroke();
    ctx.restore();
    //根据时间获取秒针旋转的角度
    ctx.save();
    ctx.rotate(seconds*(Math.PI/180)*6-0.5*Math.PI);
    ctx.beginPath();
    ctx.moveTo(190,0);
    ctx.lineTo(-15,0);
    ctx.closePath();
    ctx.strokeStyle = "red";
    ctx.lineWidth = 3;
    ctx.stroke();
    ctx.restore();

    ctx.restore();  //回到画布未移动时的位置
}
timer();
//自动绘制时钟
setInterval(timer,1000);