HTML5兑现的时钟-HTML教程-爱易网页

HTML5兑现的时钟

日期：2014-05-17　浏览次数：20819 次

HTML5实现的时钟
这是一个用HTML5做的时钟，只是一个小练习，觉得和照片比较像，拿出来分享一下。
这个时钟是自己的第一个html5动画练习，不足之处还望指点...

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>practice---clock</title>
        <style type="text/css">
            @font-face {
                font-family:DFGirl;
                src:url("./DFGirl.ttf");
                src: local("DFGirl"), url("./DFGirl.ttf");
            }
            canvas{
                border:2px solid #;
                margin:px px;
            }
        </style>
        <!--[if lt IE 9]>
        <script src="excanvas.min.js" type="text/javascript"></script>
        <![endif] -->
    </head>
    <body>
        <canvas id='c'></canvas>
    </body>
    <script type="text/javascript">
        window.onload = draw;
 
        function draw(){
            var canvas = document.getElementById('c');
            //You can change the width and height
            canvas.width = ;
            canvas.height = ;
 
            if(!canvas.getContext){
                alert('Your browser don\'t support canvas!');
            }else{
                clock(canvas);
                //starts here
            }
 
            function clock(canvas){
                var ctx = canvas.getContext('2d');
 
                //背景色
                ctx.fillStyle = '#E6E4E5';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
 
                //更改坐标系到中间
                ctx.translate(canvas.width*0.5, canvas.height*0.5);
 
                //画底部阴影
                var bottom_shadow = ctx.createRadialGradient(0, , , 0, ,  );
                bottom_shadow.addColorStop(0, 'rgba(0, 0, 0, )');
                bottom_shadow.addColorStop(0.4, 'rgba(, , , )');
                bottom_shadow.addColorStop(0.9, '#E6E4E5');
                ctx.fillStyle = bottom_shadow;
                ctx.beginPath();
                ctx.arc(0, , , Math.PI*0.8, Math.PI*0.2, false);
                ctx.fill();
 
                //底部桌面
                var bottom_blank = 18;
                ctx.fillStyle = '#DFDFDF';
                ctx.fillRect(-canvas.width*0.5, canvas.height*0.5-bottom_blank, canvas.width, bottom_blank);
 
                //白色外框
                var frame_width = 18;
                var inner_radius = ;
                ctx.beginPath();
                ctx.strokeStyle = '#FBFAF6';
                ctx.lineWidth = frame_width;
                ctx.arc(0, 0, inner_radius + frame_width*0.5, 0, Math.PI*2, true);
                ctx.stroke();
 
                //黑色内线
                ctx.beginPath();
                ctx.strokeStyle = '#';
                ctx.lineWidth = 2;
                ctx.arc(0, 0, inner_radius + 2, 0, Math.PI*2, true);
                ctx.stroke();
 
                //白色内遮罩
                ctx.beginPath();
                ctx.arc(0, 0, inner_radius, 0, Math.PI*2, true);
                ctx.clip();
 
                setInterval(function(){time_animate(ctx);}, 0);
            }
 
            //时针函数
            function get_hand_angle(h, m, s){
                if(h>12)
                    h -= 12;
                var h_angle = (h/6 + m/ + s/00) * Math.PI;
                var m_angle = (m/30 + s/0) * Math.PI;
                var s_angle = s/30 * Math.PI;
                return {
                    'h' : h_angle,
                    'm' : m_angle,
                    's' : s_angle
                }
            }
 
            function time_animate(ctx){
                ctx.save();
 
                ctx.clearRect(-, -, , );
                var inner_radius = ;
 
                //图案背景
                ctx.beginPath();
                var img = new Image();
                img.src = 'point.jpg';
                var bg = ctx.createPattern(img, 'repeat');
                ctx.fillStyle = bg;
                ctx.arc(0, 0, inner

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

HTML5兑现的时钟

相关资料更多>

推荐阅读更多>