使用canvas绘制走动的钟表

效果图：

Paste_Image.png

思路：
1.设置画布
2.利用ctx.arc绘制出大圆
3.利用for循环绘制钟表的刻度值（小时每个刻度间隔30度，分钟每个刻度间隔6度），注意设置画布的原点位置
4.设置时针、分针、秒针
5.获取当期时间，并设置对应的小时、分钟、秒的时间
6.设置指针走动：
6.1清屏
6.2重新绘制钟表的大圆和刻度值
6.3利用ctx.rotate设置时分秒针的旋转
另：写完了就发上来了，代码没经过优化，请各位大神谅解。

直接上代码
html:

<canvas id="lCanvas" width="900px" height="600px"></canvas>

css:

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #lCanvas {
        margin-left: 250px;
        border: 1px solid #000;
    }
</style>

javascript:

<script>
    var canvas = document.getElementById("lCanvas");
    //设置上下文
    var ctx = canvas.getContext("2d");

    //清屏
    function clear() {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    }

    //钟表刻度设置
    function Scale() {
        //大圆
        ctx.beginPath();
        ctx.arc(450, 300, 260, 0, 2 * Math.PI, false);
        ctx.strokeStyle = "#FFC0CB";
        ctx.lineWidth = 10;
        ctx.stroke();
        //刻度
        var hours = 12;
        var mins = 60;
        for (var i = 0; i < hours; i++) {
            ctx.save();
            ctx.beginPath();
            ctx.strokeStyle = "black";
            ctx.translate(canvas.width * 0.5, canvas.height * 0.5);
            ctx.rotate(i * 30 * Math.PI / 180);
            ctx.moveTo(-5,-190);
            ctx.lineTo(5,-190)
            ctx.lineWidth = 25;
            ctx.stroke();
            ctx.restore();
        }
        for (var i = 0; i < mins; i++) {
            ctx.save();
            ctx.beginPath();
            ctx.strokeStyle = "black";
            ctx.translate(canvas.width * 0.5, canvas.height * 0.5);
            ctx.rotate(i * 6 * Math.PI / 180);
            ctx.moveTo(-2,-195);
            ctx.lineTo(2,-195);
            ctx.lineWidth = 10;
            ctx.stroke();
            ctx.restore();
        }
        //中心圆
        ctx.save();
        ctx.beginPath();
        ctx.translate(canvas.width * 0.5, canvas.height * 0.5);
        ctx.arc(0, 0, 10, 0, 2 * Math.PI);
        ctx.fillStyle = 'black';
        ctx.fill();
        ctx.restore();
    }

    //走动
    function timeRun() {
        setInterval(function () {
            //清屏
            clear();
            //画时钟
            Scale();
            //获取时间
            var date = new Date();
            var sec= date.getSeconds();
            var min = date.getMinutes() + sec / 60;
            var hour = date.getHours() + min / 60;
            hour = hour > 12 ? hour - 12 : hour;

            //时针
            ctx.save();
            ctx.beginPath();
            ctx.translate(canvas.width * 0.5, canvas.height * 0.5);
            ctx.rotate(hour * 30 * Math.PI / 180);
            ctx.strokeStyle = '#000';
            ctx.moveTo(0,-130);
            ctx.lineTo(0,5);
            ctx.lineWidth = 12;
            ctx.stroke();
            ctx.restore();

            //分针
            ctx.save();
            ctx.beginPath();
            ctx.translate(canvas.width * 0.5, canvas.height * 0.5);
            ctx.rotate(min * 6 * Math.PI / 180);
            ctx.strokeStyle = '#ccc';
            ctx.moveTo(0,-150);
            ctx.lineTo(0,5);
            ctx.lineWidth = 8;
            ctx.stroke();
            ctx.restore();

            //秒针
            ctx.save();
            ctx.beginPath();
            ctx.translate(canvas.width * 0.5, canvas.height * 0.5);
            ctx.rotate(sec * 6 * Math.PI / 180);
            ctx.strokeStyle = 'red';
            ctx.moveTo(0,-200);
            ctx.lineTo(0,3);
            ctx.lineWidth = 3;
            ctx.stroke();
            ctx.restore();
        }, 1000);
    }

    timeRun();
</script>