html5可缩放时钟

最新推荐文章于 2021-06-28 08:15:09 发布
最新推荐文章于 2021-06-28 08:15:09 发布
阅读量448 收藏
点赞数 1
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36365638/article/details/77621585
版权
<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>canvas_time</title>
    <style type="text/css">
    div {
        text-align: center;
        margin-top: 250px;
    }


    #clock {
        border: 1px solid #cccccc;
    }
    </style>
</head>


<body>
    <div>
        <canvas id="clock" height="600px" width="600px"></canvas>
    </div>

    <script type="text/javascript" >

var dom = document.getElementById('clock');
var ctx = dom.getContext('2d');
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;
var rem = width/200;




function drawBackground() {
    ctx.save(); //存储当前环境变量；
    ctx.translate(r, r); //重置坐标到r，r
    ctx.beginPath(); // 起始一条路径
    ctx.lineWidth = 10*rem; //设置线宽10；
    ctx.arc(0, 0, r - ctx.lineWidth /2, 0, 2 * Math.PI, false);
    ctx.stroke();


    var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; //定义数组
    ctx.font = 18*rem+"px Arial";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
       hourNumbers.forEach(function(number, i) {
        var rad = 2 * Math.PI / 12 * i;
        var x = Math.cos(rad) * (r - 30*rem);
        var y = Math.sin(rad) * (r - 30*rem);
        ctx.fillText(number, x, y);
    });


    for (var i = 0; i < 60; i++) {
        var rad = 2 * Math.PI / 60 * i;
        var x = Math.cos(rad) * (r - 18*rem);
        var y = Math.sin(rad) * (r - 18*rem);
        ctx.beginPath();
        if (i % 5 === 0) {
            ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
            ctx.fillStyle = "#000";
        } else {
            ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
            ctx.fillStyle = "#ccc";
        }
        ctx.fill();
    }
}


    function drawHour(hour, minute) {
        ctx.save();
        ctx.beginPath();
        var rad = 2 * Math.PI / 12 * hour;
        var mrad = 2 * Math.PI / 12 / 60 * minute;
        ctx.rotate(rad + mrad);
        ctx.lineWidth = 6*rem;
        ctx.lineCap = "round";
        ctx.moveTo(0, 10*rem);
        ctx.lineTo(0, -r / 2);
        ctx.stroke();
        ctx.restore();
    }




    function drawMinute(minute) {
        ctx.save();
        ctx.beginPath();
        var rad = 2 * Math.PI / 60 * minute;
        ctx.rotate(rad);
        ctx.lineWidth = 3*rem;
        ctx.lineCap = "round";
        ctx.moveTo(0, 10*rem);
        ctx.lineTo(0, -r + 30*rem);
        ctx.stroke();
        ctx.restore();
    }


    function drawSecond(second) {
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = 'red';
        var rad = 2 * Math.PI / 60 * second;
        ctx.rotate(rad);
        ctx.moveTo(-2*rem, 20*rem);
        ctx.lineTo(2*rem, 20*rem);
        ctx.lineTo(1, -r + 16*rem);
        ctx.lineTo(-1, -r + 16*rem);
        ctx.fill();
        ctx.restore();
    }




    function drawDot() {
        ctx.beginPath();
        ctx.fillStyle = '#fff';
        ctx.arc(0, 0, 3*rem, 0, 2 * Math.PI, false);
        ctx.fill();
    }


    function draw01() {
        ctx.clearRect(0, 0, width, height);
        var now = new Date();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        drawBackground();
        drawHour(hour, minute);
        drawMinute(minute);
        drawSecond(second);
        drawDot();
        ctx.restore();
    }
    draw01();
    setInterval(draw01, 1000);

</script>

</body>


</html>
汪小汪_SUN
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML网页嵌入浮动的时钟
UncleGen的博客
04-03 3485
环境 windows10 phpstrom 2017.3.6 方法 创建一个HTML页面 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &l
HTML5实现可缩放时钟代码
09-27
通过上述知识点，我们可以了解到创建一个HTML5可缩放时钟是一个涉及多个技术层面的综合项目，包括对HTML5新特性的应用、JavaScript编程逻辑以及图形界面设计的理解。通过这个示例，可以看到HTML5和JavaScript强大的...
基于QT的桌面时钟 可放大缩小 透明 亲测可用 （纯代码）
08-10
1.用于桌面 2.显示完全 3.可放大缩小 4.纯代码 5.并配置整点音效（但是我注释了）
html5绘制好看的时钟,利用纯html5绘制出来的一款非常漂亮的时钟
weixin_39902598的博客
06-28 425
今天给大家分享一款非常漂亮的纯html5实现的时钟。整个界面都由html5绘制而成。一起看下效果图：实现的代码。htm代码：XML/HTML Code复制内容到剪贴板gradientTransform="rotate(90 .5 .5)">gradientTransform="rotate(-90 .5 .5)">gradientTransform="rotate(-90 .5 .5)...
HTML5 中的可缩放矢量图形（SVG）
dusea的博客
10-28 8170
http://www.ibm.com/developerworks/cn/web/wa-scalable/ HTML5 中的可缩放矢量图形（SVG） 基本概念和使用 可缩放矢量图形（SVG）是矢量图形家族的一部分。相比其他光栅图形（JPEG、GIF 和 PNG），SVG 图形具有更多的优势。本文将探讨 SVG 图形的基本概念和在 HTML5 中的使用。学习
canvas编写时钟
Lee_03280210的博客
11-18 238
var dum=document.getElementById('clock'); var ctx=dum.getContext('2d');//获取上下文context文件 var width=ctx.canvas.width;//获取宽度 var heigth=ctx.canvas.height;//获取高度 var r=width/2;//获取半径 var rem=width/200;//当
HTML5 SVG圆盘时钟动画特效代码
03-20
在本示例中，“HTML5 SVG圆盘时钟动画特效代码”利用了这两种技术来创建一个实时更新的时钟界面，使得秒针、分针和时针能够动态转动，提供了一个精确的时间展示。 首先，SVG（Scalable Vector Graphics）是一种基于...
Jquery+html5可设置闹钟并且闹钟会语音提醒的时钟特效特效代码
03-20
【标题】"Jquery+html5可设置闹钟并且闹钟会语音提醒的时钟特效特效代码"涉及的知识点主要集中在前端开发技术上，特别是HTML5的新特性与jQuery库的结合应用。以下是对这些知识点的详细说明： 1. **HTML5**: HTML5是...
利用纯html5绘制出来的一款非常漂亮的时钟
09-28
对于这个时钟设计来说，利用SVG的矢量特性，可以轻松地缩放时钟的大小，而不损失任何图形细节。 综上所述，通过HTML5和SVG技术的应用，我们可以设计出既美观又具有强大视觉效果的数字时钟界面。这些技术为设计师和...
html5缩放效果实现,HTML5实现可缩放时钟代码
weixin_42515313的博客
06-03 236
废话不多说了，直接给大家贴代码了，具体代码如下所示：canvas_timediv {text-align: center;margin-top: 250px;}#clock {border: 1px solid #cccccc;}var dom = document.getElementById('clock');var ctx = dom.getContext('2d');var width =...
HTML5 简单页面实现时钟效果
笑语轻柔
05-19 1万+
界面显示： html代码： <%-- Document : 时钟 Created on : 2016-5-19, 9:49:29 Author : Administrator --%> JSP Page canvas{ border: 1
Jquery数字动画插件标记一下
老蔡学代码
01-31 601
jQuery.Running.js 这一款插件在数字跳转效果方面不是很好.需要等大数字跳动完毕后才会直接显示小数字. 但是这一款插件可以做动态进度条和圆形饼状图可能什么时候会用到先收一下. 演示地址:http://www.qietu.com/p/jquery.running.js/ jquery.countup.min.js 这个插件在数字跳动方面感觉效果
在html页面实时显示系统时间
热门推荐
散场前的温柔的博客
11-05 8万+
在html页面实时显示系统时间 桌面新建记事本，将下列代码复制粘贴，重命名后缀为.html，保存，用浏览器打开即可 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>系统时间</title&gt...
HTML 整体缩放
q610098308的专栏
11-01 6万+
最近用到web 控件加载网页需要缩放问题，由于控件比较旧，所以只能从html 入手；html 页面缩放主要有两种，IE 可使用 CSS body{zoom:1.2;} 或者微软相关的控件支持，包括BCB 。其它 浏览器可使用 body{transform: scale(1.2);} 这个是从中心点缩放，所以需要配合另外一个属性使用 以下是样例 ZOOM,应该只支持IE ： &lt...
2022年40多份中国各行业、区域统计大集合(全新整理)
最新发布
08-30
1、资源内容地址：https://blog.csdn.net/2301_79696294/article/details/141308935 2、代码特点：今年全新，手工精心整理，放心引用，数据来自权威，相对于其他人的控制变量数据准确很多,适合写论文做实证用 ，不会出现数据造假问题 3、适用对象：大学生，本科生，研究生小白可用，容易上手！！！ 3、课程引用: 经济学，地理学，城市规划与城市研究，公共政策与管理，社会学，商业与管理 ## 数据指标说明 为了方便大家研究，我们收集了各类年鉴，做了一个合集，目前共有40多分2022年最新年鉴，后续将持续更新中~~~~
基于springboot的课程作业管理系统设计与实现.docx
08-30
基于springboot的课程作业管理系统设计与实现.docx
(2024年可用)手把手自制基于itchat的微信机器人
08-30
(2024年可用)手把手自制基于itchat的微信机器人
服装定制系统-论文.zip
08-30
摘要 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式,总体功能模块运用自顶向下的分层思想。再然后就是实现系统并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过服装定制系统将会使服装定制各个方面的工作效率带来实质性的提升。 关键字：B/S模式 服装定制 软件架构 Abstract First of all, the thesis clearly discusses the systematic research content at the very beginning. Secondly, the analysis of system requirements analysis, understand "what to do", including business analysis and busines
HTML5 SVG：可缩放矢量图形详解与Canvas对比
HTML5之SVG可缩放矢量图形是现代Web开发中不可或缺的一部分，由W3C组织制定的SVG (Scalable Vector Graphics) 是一种基于XML的二维矢量图形格式，用于创建高质量、可适应不同屏幕尺寸且不失真的图形。SVG的优势在于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值