[SoOnPerson] HTML5 Canvas 模拟时钟

因为和朋友在讨论一个关于时钟的问题：

    一天（24h）,时钟的分针和时针可以重合多少次，他们一直在争论22，23

然后我觉得蛮好玩的，就写了一个看看，但是对于22，23，我也没想数过

//屏幕的高度
var sc_height = screen.availHeight;
//屏幕的宽度
var sc_width = screen.availWidth;
//秒针角度
var jiaoduS = 0;
//分针角度
var jiaoduM = 0;
//一秒
var s = 1000   ;
function draw() {
    //jq获取元素
    var cav = $("#background_block_web");
    //设置style里的宽高
    cav.css({"height": sc_height, "width": sc_width, "margin": 0});
    //设置属性宽高，这个不设置的话，图案会很模糊
    cav.attr("width",sc_width);
    cav.attr("height",sc_height);

    //原生获取元素，通过jq获取的好像不可以
    var cv = document.getElementById("background_block_web");
    //获取上下文对象2d,具体我也不太懂


    var context = cv.getContext('2d');
    context.fillStyle = "white";
    context.fillRect(0,0,sc_width,sc_height);
    drawMap(context);

}
function  drawMap(context) {
    window.setInterval(function () {
    //清除
    context.clearRect(0,0,sc_width,sc_height);
    //黑色的填充色，圆球的填充色
    context.fillStyle = 'white';
    //开始
    context.beginPath();
    //圆的边的颜色
    context.strokeStyle = 'black';
    //圆的 x,y,大小，起始角度，结束角度360度，也就是一圈，因为pi是180度
    context.arc(300,300,300,0,2*Math.PI);
    //填充上面的黑色
    context.fill();

    //圆心为起点，画一条直线（分针）
    context.moveTo(300,300);
    context.lineTo(300+150*Math.sin(jiaoduM),300-150*(Math.cos(jiaoduM)));
    //圆心为起点，画一条直线（秒针）
    context.moveTo(300,300);
    context.lineTo(300+200*Math.sin(jiaoduS),300-200*(Math.cos(jiaoduS)));
    
    //角度增加
    jiaoduS+=((6)*(Math.PI/180));
    jiaoduM+=((0.1)*(Math.PI/180));

        //画
    context.stroke();

    },s);
}

解释一下表盘半径300，圆心坐标（300，300）；左上角的坐标轴（0，0），分针是短的那个，长度是150，秒针是长的，长度200

秒针每秒转过的角度是6度，原因是60秒转过360度，所以一秒六度

分针每秒转过的角度是0.1度，原因是3600秒转360度，所以一秒0.1度

π 是180度，所以π/180 =1度

至于每个角度对应的线段的终点坐标，画一个坐标轴算一下就好

知道角度还有斜边