您的位置：首页 > 其它

用CANVAS画个时钟

2015-06-06 23:56 393 查看 
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html5实战</title>
        <style>
            *{padding: 0; margin: 0;}
            body{background: #000;}
            canvas{background: #fff;}
        </style>
        <script>
            window.onload=function(){
            	var oC = document.getElementById('canvas');
            	var oGC = oC.getContext('2d');
            	var x=200,y=200,r=150;

            	function  draw(){

            	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 hourValue = (oHour*30-90 + oMin/2)*Math.PI/180;

            	var minValue = (oMin*6-90)*Math.PI/180;

            	var secValue = (oSec*6-90)*Math.PI/180;

            	oGC.beginPath();
            	for(var i=0;i<60;i++){
            		oGC.moveTo(x,y);
            		oGC.arc(x,y,r,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);
            	}
            	oGC.closePath();
            	oGC.stroke();

            	oGC.fillStyle="#fff";
            	oGC.beginPath();
            	oGC.arc(x,y,r*19/20,0,2*Math.PI,false);
            	oGC.closePath();
            	oGC.fill()

                oGC.lineWidth=3;
            	oGC.beginPath();
            	for(var i=0;i<12;i++){
            		oGC.moveTo(x,y);
            		oGC.arc(x,y,r,i*30*Math.PI/180,(i+1)*30*Math.PI/180,false);
            	}
            	oGC.closePath();
            	oGC.stroke();

            	oGC.fillStyle="#fff";
            	oGC.beginPath();
            	oGC.arc(x,y,r*18/20,0,2*Math.PI,false);
            	oGC.closePath();
            	oGC.fill()

            	//画时针

            	oGC.lineWidth=5;
            	oGC.beginPath();
            
            	oGC.moveTo(x,y);
            	oGC.arc(x,y,r*10/20,hourValue,hourValue,false);
  
            	oGC.closePath();
            	oGC.stroke();

                //画分针
            	oGC.lineWidth=3;
            	oGC.beginPath();
            	oGC.moveTo(x,y);
            	oGC.arc(x,y,r*14/20,minValue,minValue,false);
  
            	oGC.closePath();
            	oGC.stroke();

            	oGC.lineWidth=1;
            	oGC.beginPath();
            	oGC.moveTo(x,y);
            	oGC.arc(x,y,r*19/20,secValue,secValue,false);
            	oGC.closePath();
            	oGC.stroke();
            }
	            setInterval(function(){
	            	draw();
	            },1000)
            }

        </script>
    </head>
    <body>

    	<canvas id="canvas" width='400' height="400"></canvas>

    </body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航