设为首页 - 加入收藏 - 网站地图 SecYe安全 Www.SecYe.Com - 国内网络信息安全IT技术门户网
当前位置:首页 > 网页设计 > Javascript > 正文

canvas+js+css3实现的时钟

时间:2013-07-03 08:50 来源:未知 作者:www.secye.com 阅读:

最新版的火狐和opera以及IE有效,chrome可能需要稍作改动,加个-webkit前缀之类的

<!DOCTYPE HTML>
<html>
<body>
<div style="width:250px;height:250px;border:1px solid black;position:relative;margin:200px auto;">
<canvas id="clock" width="250" height="250" style="border:0px solid #d3d3d3;"></canvas>
<canvas id="sec" width="10" height="200" style="position:absolute;top:22px;left:128px;border:0px solid #d3d3d3;"></canvas>
<canvas id="min" width="10" height="200" style="position:absolute;top:22px;left:128px;border:0px solid #d3d3d3;"></canvas>
<canvas id="hour" width="10" height="200" style="position:absolute;top:22px;left:128px;border:0px solid #d3d3d3;"></canvas>
</div>

<script>
function clock(){
     var deg=Math.PI/6,c=document.getElementById("clock"),c=c.getContext("2d"),x,y;
     for(var i=1;i<=12;i++){
         x=125+Math.sin(deg*i)*100;
         y=125-Math.cos(deg*i)*100;
         c.shadowBlur=10;
         c.shadowColor="red";
         if(i==12||i==3||i==6||i==9){
             c.font="20px Georgia";
             c.fillStyle="blue";
             if(i==12){
                 x=120;
                }
            }else{
             c.fillStyle="black";
             c.font="15px Georgia";
            }
         c.fillText(i,x,y);
        }
    }
function sec(){
     var c=document.getElementById("sec");
     c=c.getContext("2d");
     c.arc(5,100,5,0,2*Math.PI);
     c.globalCompositeOperation="destination-over";
     c.fillStyle="red";
     c.fill();
     c.beginPath();
     c.moveTo(5,10);
     c.lineTo(1,25);
     c.lineTo(9,25);
     c.fillStyle="red";
     c.fill();
     c.beginPath();
     c.moveTo(5,10);
     c.lineTo(5,100);
     c.strokeStyle="red";
     c.stroke();
    }
function min(){
     var c=document.getElementById("min");
     c=c.getContext("2d");
     c.arc(5,100,5,0,2*Math.PI);
     c.globalCompositeOperation="destination-over";
     c.fillStyle="red";
     c.fill();
     c.beginPath();
     c.moveTo(5,25);
     c.lineTo(1,40);
     c.lineTo(9,40);
     c.closePath();
     c.rect(3,40,4,60);
     c.fillStyle="blue";
     c.fill();
    }
function hour(){
     var c=document.getElementById("hour");
     c=c.getContext("2d");
     c.arc(5,100,5,0,2*Math.PI);
     c.globalCompositeOperation="destination-over";
     c.fillStyle="red";
     c.fill();
     c.beginPath();
     c.moveTo(5,40);
     c.lineTo(1,55);
     c.lineTo(9,55);

本文来源:SecYe安全网[http://www.secye.com] (责任编辑:SecYe安全)

点击复制链接 与好友分享!

顶一下
(0)
0%
踩一下
(0)
0%