HTML5实现的时钟

最新推荐文章于 2021-07-22 00:39:24 发布
最新推荐文章于 2021-07-22 00:39:24 发布
阅读量163 收藏 1
点赞数
文章标签： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_18135/article/details/82295800
版权
这是一个用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_radius, 0, Math.PI*2, true);
                ctx.fill();

                if(window.ActiveXObject){ //IE HACK
                    for(var i=-; i<; i+=70){
                        for(var j=-; j<; j+=70)
                            ctx.drawImage(img, i, j);
                    }

                    ctx.beginPath();
                    ctx.strokeStyle = '#eee';
                    ctx.lineWidth = ;
                    ctx.arc(0, 0, , 0, Math.PI*2, true);
                    ctx.stroke();

                    ctx.beginPath();
                    ctx.strokeStyle = '#';
                    ctx.lineWidth = 2;
                    ctx.arc(0, 0, , 0, Math.PI*2, true);
                    ctx.stroke();

                    ctx.beginPath();
                    ctx.strokeStyle = '#fff';
                    ctx.lineWidth = 17;
                    ctx.arc(0, 0, , 0, Math.PI*2, true);
                    ctx.stroke();
                }

                //数字
                ctx.fillStyle = '#';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                var font_radius = ;
                //var font_family = '華康少女文字W6';  //只有opera能用
                var font_family = 'DFGirl';
                for(var angle=Math.PI/6,i=1; i<13; angle += Math.PI/6, i++){
                    if(i%3 == 0){
                        font_radius = ;
                        ctx.font = '65px ' + font_family;
                    }else{
                        ctx.font = 'bold 30px ' + font_family;
                        font_radius = ;
                    }
                    //ctx.fillText(i.toString(), font_radius*Math.sin(angle)-5, -font_radius*Math.cos(angle)-4);//中文少女体微调数字位置
                    ctx.fillText(i.toString(), font_radius*Math.sin(angle), -font_radius*Math.cos(angle));
                }

                //内阴影
                if(!window.ActiveXObject){ //NOT IE
                    ctx.translate(10, -10);
                    var inner_shadow = ctx.createRadialGradient(0, 0, , 0, 0, );
                    inner_shadow.addColorStop(0.1, 'rgba(0, 0, 0, 0)');
                    inner_shadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.1)');
                    inner_shadow.addColorStop(1, 'rgba(0, 0, 0, 0.8)');
                    ctx.beginPath();
                    ctx.fillStyle = inner_shadow;
                    ctx.arc(0, 0, , 0, Math.PI*2, true);
                    ctx.fill();
                }

                var now = new Date();

                //显示指针
                var time = get_hand_angle(now.getHours(), now.getMinutes(), now.getSeconds());
                var h_width = , h_height = 7;
                var m_width = , m_height = 4;
                var s_width = , s_height = 2;
                var outside_width = 35;

                ctx.shadowOffsetX = 6;
                ctx.shadowOffsetY = 3;
                ctx.shadowBlur = 4;
                ctx.shadowColor = '#aaa';
                ctx.fillStyle = '#';
                ctx.rotate(time.h);
                ctx.fillRect(-h_height*0.5, -h_width+outside_width, h_height, h_width);
                ctx.rotate(time.m-time.h);
                ctx.fillRect(-m_height*0.5, -m_width+outside_width, m_height, m_width);
                ctx.rotate(time.s-time.m);
                ctx.fillRect(-s_height*0.5, -s_width+outside_width, s_height, s_width);
                ctx.rotate(-time.s);

                ctx.shadowColor = 'rgba(0, 0, 0, 0)';

                //重画一次时针，解决阴影覆盖本身的指针
                ctx.rotate(time.h);
                ctx.fillRect(-h_height*0.5, -h_width+outside_width, h_height, h_width);

                //中间的固定圈
                ctx.beginPath();
                ctx.strokeStyle = '#';
                ctx.lineWidth = 4;
                ctx.arc(0, 0, 6, 0, Math.PI*2, true);
                ctx.stroke();

                ctx.restore();
            }
        }

    </script>
</html>
iteye_18135
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
超级实用的html5制作15种数字时钟样式代码
11-06
超级实用的html5制作15种数字时钟样式代码 超级实用的html5制作15种数字时钟样式代码
HTML5实现时钟
04-12
画一个时钟
html5 canvas时钟
andywang821017的博客
09-19 111
基础知识点： canvas标签只是图形容器，您必须使用脚本来绘制图形。 getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。——获取上下文对象。 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。 fillRect(l,t...
HTML5时钟制作代码
weixin_30426879的博客
12-18 261
1 <!doctype html> 2 <meta charset="UTF-8"> 3 <html> 4 <header></header> 5 <body> 6 7 <!--canvas标签画圆--> 8...
html5画布时钟cnsd,Canvas：时钟
weixin_30332669的博客
06-28 238
这个时钟是将钟盘的圆心点移到了 canvas 画布中心点。以方便后面的方位计算ctx.translate(width/2,height/2);现定义一个圆盘来显出这个时钟的基本位置ctx.save()ctx.beginPath();ctx.arc(0,0,r+90,0,2*Math.PI,false);ctx.lineWidth= 200;ctx.closePath();ctx.drawImage...
制作一个钟表html,用html5实现一个简单的钟表外观
weixin_32268169的博客
06-26 179
html5已经出来好长时间了，但仍然有不多小伙伴们不太懂，下面小编就来用html5实现一个简单的钟表外观 #myCanvas{border:3px solid blue;} window.onload = function() { var mycanvas = document.getElementById("myCanvas"); var context = mycan...
html5时钟实现代码
09-28
根据提供的文件信息，我们可以深入分析并提取出有关 HTML5 时钟实现的关键知识点： ### HTML5 时钟实现概述 该代码示例展示了一个利用 HTML5 的 `<canvas>` 元素来绘制一个动态时钟的方法。它通过 JavaScript 来...
HTML5实现可缩放时钟代码
09-27
在不同设备或不同分辨率的屏幕上显示时，只要调整canvas元素的宽高，就可以实现时钟的适配。 5. 字体样式：在绘制数字时，使用了Arial字体，并通过font属性指定了字体大小。样式通过JavaScript直接写入到canvas的...
html5数字时钟_html5电子时钟_html5时钟效果代码
11-10
HTML5数字时钟是一种利用HTML5的Canvas API和JavaScript编程技术来实现的动态时钟效果。这个技术在网页设计和开发中广泛应用，为用户提供了一种实时、直观的时间展示方式，无需依赖任何外部插件或服务器端的数据更新...
用HTML5的canvas实现一个炫酷时钟效果
09-28
接下来，我们需要实现时钟指针的动态更新，即根据当前时间来调整指针的角度。这通常涉及到JavaScript的Date对象，获取当前小时、分钟和秒，然后将这些值转换为角度，最后使用arc方法在canvas上绘制指针。时针、分针...
html5画布时钟cnsd,canvas动画时钟
weixin_28025327的博客
06-28 218
最近在学canvas，然后根据MDN上的例子做了个动画时钟(为什么要造个轮子，因为丑。。)这是MDN上的例子，怎么说呢，比较复古吧。首先，找一张时钟的图片，就是下面这张了。——来自bigger than bigger的dribbble网站，图片来源(侵删)然后就开始用canvas实现这个逼格满满的时钟吧。在html代码中插入canvas标签在js文件中创建画布(假设我们使用的都是现代浏览器)。fu...
html5画布操作的简单学习-简单时钟
智慧是做事用的,对于灵魂来说,靠的是信仰
12-13 3271
html5画布操作的简单学习-简单时针 一.什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 二.本次学习html5的canvas的简单函数 getContext(style)-----
html5画布手绘时钟,html5 canvas绘画时钟
weixin_42350014的博客
06-21 407
functioninit(){var canvas = document.getElementById("canvas"),context= canvas.getContext("2d");setInterval(function(){draw(canvas, context)},1000);}functiondraw(canvas, context){var x =canvas.width,y=...
HTML5 Canvas设计动画：时钟
YanHSama的博客
02-03 165
<style type="text/css"> div{ text-align: center; margin-top: 250px; } #clock{ border: 1px solid #ccc; } </style> <div > <canvas id="clock" height="...
html5在画布上输出一个时钟,HTML5Canvas实现一个时钟
weixin_26937243的博客
06-20 106
本时钟是通过HTML5的Canvas实现的，相关的技术大家可以到这儿去看看： 链接地址下面就没有什么好所的了，上面的链接中有详细的说明，有图有真相 ～～ 下面是代码： HTML5 Test var panel, ctx, img; var pw, ph, ox, oy; function ini...
初识HTML5 canvas时钟绘制
qq_49721447的博客
01-08 373
HTML5 canvas 时钟绘制 canvas时钟绘制 效果展示 因为不会制作动态gif图，只能上传一张静态图了，此时钟会随时间变化 原理说明 代码展示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>绘制时钟</title> <style type="text/css"> #hour,#min,#sec{
用html5画一个时钟,用HTML/canvas实现一个时钟
weixin_29666341的博客
07-22 340
1.实现效果2.关于canvasHTML的canvas的相关内容可以看菜鸟教程的这篇文章。我主要是通过这篇文章来学习canvas的基础知识的。这个小项目也是参考了文章中附带的参考代码。https://www.runoob.com/w3cnote/html5-canvas-intro.html3.代码分析3.1 HTML部分用canvas标签创建一个500*500的画布你的浏览器不支持 canvas...
HTML5canvas时钟实例
长空一笑的博客
03-19 915
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{background: #000;} #c1{background: #fff;} </style> <script>
h5画布实现钟表
一李
03-15 311
关于 save和restore要通过栈结构来控制路径， 每次重新画一个图形的时候要调用beginPath清空整个路径容器 使用canvas实现动画效果经常需要使用到定时器以及for循环的配合 canvas画布只有getContext 和width height 大部分性质都是和画笔相关的 通过moveto等属性计算好原点的位置，方便随时对画中的属性进行计算。 计算好原点的距离 ...
实现HTML5 Canvas绘制时钟
最新发布
06-01
好的，下面是一个简单的HTML5 Canvas绘制时钟的示例代码： ``` <!DOCTYPE html> <html> <title>Canvas时钟 canvas { border: 2px solid black; } <canvas id="clock" width="200" height="200"></...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值