欢迎光临景诺科技软件开发淘宝店

进店请收藏,谢谢

html5学习之canvas闹钟

html5学习之canvas闹钟 点击预览:demo

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas clock</title>
<style>
html,body{background-color:#000; margin:0; padding:0;color:#fff;}
#canvas{ margin:100px 0;background-color:#fff;}
</style>
</head>

<body>
<center>
        <canvas id="canvas" width="500" height="500">
                <span>你的浏览器out喇,看不到效果。</span>
        </canvas>
</center>
<script type="text/javascript">
        var oc=document.getElementById("canvas");
        var op=oc.getContext("2d");
        function move(){
                var x=250;
                var y=250;
                var mdate=new Date();
                var h=mdate.getHours();
                var m=mdate.getMinutes();
                var s=mdate.getSeconds();
                var hh=(-90+h*30+m/2)*Math.PI/180;
                var mm=(-90+m*6)*Math.PI/180;
                var ss=(-90+s*6)*Math.PI/180;
                op.clearRect(0,0,op.width,op.height);
                for(var i=0;i<=60;i++){
                op.lineWidth=1;
                op.beginPath();
                op.moveTo(x,y);
                op.arc(x,y,150,6*i*Math.PI/180,6*(i+1)*Math.PI/180);
                op.closePath();
                op.stroke();
                }
                //绘制遮挡圆
				op.beginPath();
                op.fillStyle="#fff";
                op.moveTo(x,y);
                op.arc(x,y,145,0*Math.PI/180,360*Math.PI/180);
                op.closePath();
                op.fill();
                //绘制时针格子
                for(var i=0;i<=12;i++){
                op.lineWidth=1;
                op.beginPath();
                op.moveTo(x,y);
                op.arc(x,y,150,30*i*Math.PI/180,30*(i+1)*Math.PI/180);
                op.closePath();
                op.stroke();
                }
                //绘制遮挡圆
                op.beginPath();
                op.fillStyle="#fff";
                op.moveTo(x,y);
                op.arc(x,y,140,0*Math.PI/180,360*Math.PI/180);
                op.closePath();
                op.fill();
                //绘制秒针
                op.lineWidth=1;
                op.beginPath();
                op.moveTo(x,y);
                op.arc(x,y,135,ss,ss,false);
                op.closePath();
                op.stroke();
                //绘制分针
                op.lineWidth=2;
                op.beginPath();
                op.moveTo(x,y);
                op.arc(x,y,100,mm,mm,false);
                op.closePath();
                op.stroke();
                //绘制时针
                op.lineWidth=4;
                op.beginPath();
                op.moveTo(x,y);
                op.arc(x,y,80,hh,hh,false);
                op.closePath();
                op.stroke();
        }
        setInterval(move,1000);
        move();
</script>
</body>
</html>

更多

本文固定链接: http://shanmao.me/web/html5/html5-xue-xi-zhi-canvas-nao-zhong | 山猫的博客

该日志由 admin 于2012年12月28日发表在 HTML5 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: html5学习之canvas闹钟 | 山猫的博客
关键字: , ,