canvas案例——画时钟

基本思路，先画一个200半径的圆

ctx.arc(250,250,200,0,2*Math.PI);

然后再画时分刻度，可以先利用translate变化坐标到圆的中心点，然后再通过rotate旋转

             //画12个时刻度线

 2             for(var i=0;i<12;i++){

 3                 ctx.save();

 4                 ctx.translate(250,250);

 5                 ctx.rotate(i*Math.PI/6);

 6                 ctx.moveTo(0,-180);

 7                 ctx.lineTo(0,-195);

 8                 ctx.stroke();

 9                 ctx.restore();

10             }

11             //画60个分刻度线

12              for(var i=0;i<60;i++){

13                  //经过时刻度跳过

14                  if(i%5!=0){

15                     ctx.save();

16                     ctx.translate(250,250);

17                     ctx.rotate(i*Math.PI/30);

18                     ctx.beginPath();

19                     ctx.strokeStyle="#555";

20                     ctx.moveTo(0,-190);

21                     ctx.lineTo(0,-195);

22                     ctx.closePath();

23                     ctx.stroke();

24                     ctx.restore();

25                  }

26             }

需要注意，在画刻度线时要用到save()和restore()

save()是保存原始的坐标，经过变换坐标后画刻度线，再restore()回到原始坐标。不然的话，每一次坐标变化都是基于前一次的坐标。

再利用date()函数获取当前时间，得到时/分/秒，分别计算指针的相应角度，利用rotate旋转。

一开始用Math计算各指针的两端坐标，再画指针，发现需要考虑落在各象限的正负值，很烦，直接rotate旋转，太简单了。

画时针

//画时针

        ctx.save();

        ctx.translate(250,250);

        ctx.rotate(hour/12*2*Math.PI);

        ctx.beginPath();

        ctx.moveTo(0,15);

        ctx.lineTo(0,-150);

        ctx.closePath();

        ctx.stroke();

        ctx.restore();

完整代码

<html>

    <head>

        <title>canvas demo</title>

    </head>

    <body>

        <canvas id="mycanvas" width="500px" height="500px" ></canvas>

        <script type="text/javascript">

        drawclock();

        setInterval(drawclock,1000);

        function drawclock(){

            var mycanvas = document.getElementById("mycanvas");

            var ctx = mycanvas.getContext("2d");

            ctx.clearRect(0,0,500,500);

            //画圆圈

            ctx.beginPath();

            ctx.lineWidth=5;

            ctx.beginPath();

            ctx.arc(250,250,200,0,2*Math.PI);

            ctx.closePath();

            ctx.stroke();

            ctx.beginPath();

            ctx.arc(250,250,5,0,2*Math.PI);

            ctx.closePath();

            ctx.stroke();

            //画12个时度线

            for(var i=0;i<12;i++){

                ctx.save();

                ctx.translate(250,250);

                ctx.rotate(i*Math.PI/6);

                ctx.beginPath();

                ctx.moveTo(0,-180);

                ctx.lineTo(0,-195);

                ctx.closePath();

                ctx.stroke();

                ctx.restore();

            }

            //画60个分度线

             for(var i=0;i<60;i++){

                 //经过时度跳过

                 if(i%5!=0){

                     ctx.save();

                    ctx.translate(250,250);

                    ctx.rotate(i*Math.PI/30);

                    ctx.beginPath();

                    ctx.strokeStyle="#555";

                    ctx.moveTo(0,-190);

                    ctx.lineTo(0,-195);

                    ctx.closePath();

                    //context.globalCompositeOperation='xor';

                    ctx.stroke();

                    ctx.restore();

                 }

            }

            var now = new Date();

            var sec = now.getSeconds();

            var min = now.getMinutes();

            var hour = now.getHours();

            hour=hour>12?hour-12:hour;

            hour=hour+min/60;

            //画时针

            ctx.save();

            ctx.translate(250,250);

            ctx.rotate(hour/12*2*Math.PI);

            ctx.beginPath();

            ctx.moveTo(0,15);

            ctx.lineTo(0,-150);

            ctx.closePath();

            ctx.stroke();

            ctx.restore();

            //画分针

            ctx.save();

            ctx.translate(250,250);

            ctx.rotate(min/60*2*Math.PI);

            ctx.lineWidth=3;

            ctx.beginPath();

            ctx.moveTo(0,20);

            ctx.lineTo(0,-170);

            ctx.closePath();

            ctx.stroke();

            ctx.restore();

            //画分针

            ctx.save();

            ctx.translate(250,250);

            ctx.rotate(sec/60*2*Math.PI);

            ctx.lineWidth=1;

            ctx.beginPath();

            ctx.moveTo(0,25);

            ctx.lineTo(0,-180);

            ctx.closePath();

            ctx.stroke();

            ctx.restore();

        }

        </script>

        <style>

            #mycanvas{

                border: solid 1px;

            }

        </style>

    </body>

</html>

canvas案例——画时钟-LMLPHP