Html5 Canvas 绘制时钟

来源：互联网发布：rimworld mac mod 编辑：程序博客网时间：2024/05/01 23:33
原文 http://www.cnblogs.com/angelatian/p/6113051.html
结合博主文章做了相关优化，减少部分重复代码；
<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <title> html5 Canvas 绘制时钟 </title>  <meta name="Author" content="cloud">  <meta name="Keywords" content="html5 Canvas 绘制时钟">  <meta name="Description" content="html5 Canvas 绘制时钟">  <title>Document</title>  <style type = "text/css">        #c1{            display:block;            margin: 50px auto;        }  </style> </head> <body>        <!-- 时钟 Canvas S -->    <canvas id="c1"  width="800px" height="800px">         <span>不支持canvas浏览器</span>    </canvas>     <!-- 时钟 Canvas E --> </body>    <!-- canvas 时钟脚本 S -->    <script>        window.onload = function(){            var oC = document.getElementById('c1');            var oGC = oC.getContext('2d');            function toDraw(){                var a = 400;                var b = 400;                var r = 200;                oGC.clearRect(0, 0, oC.width, oC.height);                //获取时间                var oDate = new Date();                var oHour = oDate.getHours();                var oMin = oDate.getMinutes();                var oSec = oDate.getSeconds();var PI = Math.PI / 180;                var oHourvalue = (-90 + oHour * 30 + oMin / 2 ) * PI;                var oMinvalue = (-90 + oMin * 6 ) * PI;                var oSecvalue = (-90 + oSec * 6 ) * PI;                //绘制秒的刻度DRAW_SECONDS_SCALE(oGC, a, b, r, PI);                //绘制分的刻度                DRAW_MINUTES_SCALE(oGC, a, b, r, PI);                //绘制时针                oGC.lineWidth = 4;                guiding_principle(oGC, a, b, r * 14.5 / 20, oHourvalue);                //绘制分针                oGC.lineWidth = 2;                guiding_principle(oGC, a, b, r * 16.5 / 20, oMinvalue);                //绘制秒针                oGC.lineWidth = 1.5;                guiding_principle(oGC, a, b, r * 18.5 / 20, oSecvalue);            };            setInterval(toDraw,1000);        };//绘制秒的刻度function DRAW_SECONDS_SCALE(oGC, a, b, r, PI){oGC.beginPath();                for(var i = 0; i < 60; i++){                    oGC.moveTo(a, b);                    oGC.arc(a, b, r, 6 * i * PI, 6 * (i + 1) * PI,false);                }                oGC.closePath();                oGC.stroke();                oGC.fillStyle = 'white';                oGC.beginPath();                oGC.moveTo(a,b);                oGC.arc(a, b, r * 19 / 20, 0, 360 * PI ,false);                oGC.closePath();                oGC.fill();}//绘制分的刻度function DRAW_MINUTES_SCALE(oGC, a, b, r, PI){oGC.lineWidth = 3;oGC.beginPath();for(var i = 0; i < 12; i++){oGC.moveTo(a, b);oGC.arc(a, b, r, 30 * i * PI, 30 * ( i+ 1) * PI, false);}oGC.closePath();oGC.stroke();oGC.fillStyle = 'white';oGC.beginPath();oGC.moveTo(a, b);oGC.arc(a, b, r * 17 / 20, 0, 360 * PI, false);oGC.closePath();oGC.fill();}        // 绘制指针        function guiding_principle(oGC, a, b, r, oSecvalue){            oGC.beginPath();            oGC.moveTo(a,b);            oGC.arc(a, b, r, oSecvalue, oSecvalue, false);            oGC.closePath();            oGC.stroke();        }    </script>    <!-- canvas 时钟脚本 E --></html>
1 0
Html5 Canvas 绘制 时钟

Html5 Canvas 绘制时钟
