用html5实现一个简单的钟表外观-木庄网络博客

本文摘自PHP中文网，作者零下一度，侵删。

html5已经出来好长时间了，但仍然有不多小伙伴们不太懂，下面小编就来用html5实现一个简单的钟表外观

<html lang="en-US">
<style>
    #myCanvas{border:3px solid blue;}
</style>
<head>
    <script type="text/javascript">
        window.onload = function()
        {
            var mycanvas = document.getElementById("myCanvas");
            var context = mycanvas.getContext("2d");
                     
            context.lineWidth = 2;
            context.strokeStyle = "blue";
            context.fillStyle = "blue";
            context.arc(250,200,5,0,Math.PI*2,true);
            context.fill();
 
            context.beginPath();
            context.arc(250,200,150,0,Math.PI*2,true);
            context.stroke();
 
            context.translate(250,200);
            context.rotate(-Math.PI/2);
             
            context.save();
            for(var i=0;i<60;i++)
            {
                if(i % 5 == 0)
                {
                    context.fillRect(130,0,20,5);       
                    context.fillText((i/5 == 0?12:i/5),120,5);
                }
                else
                {
                    context.fillRect(140,0,10,2)
                }
                context.rotate(Math.PI/30);             //360°每6度旋转一次
            }
             
            context.fillRect(0,-2,90,3);
 
            context.stroke();
        }
    </script>
</head>
 
<body>
    <canvas id=myCanvas width=500px height=400px></canvas>
</body>
</html>