canvas绘制时钟

最新推荐文章于 2022-09-09 12:03:49 发布
最新推荐文章于 2022-09-09 12:03:49 发布
阅读量319 收藏
点赞数
分类专栏： web前端 文章标签： web前端 canvas

效果如下：

代码：

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{text-align:center;margin-top:250px;}
    </style>
</head>
<body>
<div>
    <canvas id="clock" width="300px" height="300px"></canvas>
</div>
<script>
    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);//重新定义圆点到中心
        ctx.beginPath();
        ctx.lineWidth=10*rem;
        ctx.arc(0,0,r-5*rem,0,Math.PI*2,false);//圆点坐标，起始角0，结束角2π，顺时针
        ctx.stroke();
        var hourNum=[3,4,5,6,7,8,9,10,11,12,1,2];//数组存小时数
        ctx.font="18px Arial";
        ctx.textAlign="center";
        ctx.textBaseline="middle";
        hourNum.forEach(function (num,i) {
            var rad=2*Math.PI/12*i;//弧度
            var x=(r-30*rem)*Math.cos(rad);
            var y=(r-30*rem)*Math.sin(rad);
            ctx.fillText(num,x,y);
        });
        for(var i=0;i<60;i++){//画圆点
            var rad=2*Math.PI/60*i;
            var x=(r-18*rem)*Math.cos(rad);
            var y=(r-18*rem)*Math.sin(rad);
            ctx.beginPath();
            if(i%5==0){
                ctx.fillStyle="#000";
                ctx.arc(x,y,2,0,Math.PI*2,false);
            }
            else{
                ctx.fillStyle="#ccc";
                ctx.arc(x,y,2,0,Math.PI*2,false);
            }
            ctx.fill();
        }
        ctx.closePath();
    }
    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.moveTo(0,10*rem);
        ctx.lineTo(0,-r/2);
        ctx.lineCap="round";
        ctx.stroke();
        ctx.restore();
    }
    function drawMinute(minute,second){//分针
        ctx.save();
        ctx.beginPath();
        var rad=2*Math.PI/60*minute;
        var srad=2*Math.PI/60/60*second;
        ctx.rotate(rad+srad);
        ctx.lineWidth=3*rem;
        ctx.moveTo(0,10*rem);
        ctx.lineTo(0,-r+30*rem);
        ctx.lineCap="round";
        ctx.stroke();
        ctx.restore();
    }
    function drawSecond(second){//秒针
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle="#c14543";
        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*rem,-r+18*rem);
        ctx.lineTo(-1*rem,-r+18*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 draw(){
        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,second);//分钟
        drawSecond(second);//秒钟
        drawDot();//中心圆点
        ctx.restore();
    }
    setInterval(draw,1000);
</script>
</body>
</html>

其中的rem值是为了使canvas画布大小变化时时钟的样式能够保持

 

辣姐什么鬼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript Canvas绘制时钟
02-22
JavaScript Canvas绘制时钟
canvas常用方法，canvas绘制时钟案例
study_way的博客
10-26 208
在路径对象上，使用不同的绘图命令来定义路径的形状。
使用canvas绘制时钟
NanChen的博客
09-09 445
是的，beginPath()是重新开始新路径，而把之前的路径都清空掉。arc方法是2D画布的一个绘制圆状态的一个方法，arc有六个参数：arc(x, y, r, sAngle, eAngle, counterclockwise);stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。使用clip()函数将该区域（由rect()、arc()方法指定的绘图区域）设定为裁选区。使用Canvas的绘制函数比如，rect()、arc()之类的方法选择好绘图区域。
html5canvas绘制时钟,JavaScript html5 canvas绘制时钟效果
weixin_35693055的博客
06-20 107
本文实例讲述了JavaScript+html5 canvas绘制时钟效果。分享给大家供大家参考，具体如下：HTML部分：canvas绘图JavaScript部分：function init(){var canvas = document.getElementById("canvas"),context = canvas.getContext("2d");setInterval(function()...
canvas 绘制时钟
weixin_42630688的博客
03-16 76
class Clock { constructor() { this.canvas = document.querySelector('#canvas') this.ctx = this.canvas.getContext('2d') this.margin = 30 this.fontSize = 20 this.center = { x: canvas.width / 2,
JS+Canvas绘制时钟效果
10-22
主要为大家详细介绍了基于javascript下使用canvas绘制时钟的具体实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
canvas绘制表盘时钟
08-31
本文主要分享了canvas绘制表盘时钟的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
HTML5 Canvas绘制时钟
06-01
NULL 博文链接：https://wenhai.iteye.com/blog/2158714
电力系统调度过程连续潮流matlab代码.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
【基于Java+Springboot的毕业设计】付费问答系统(源码+演示视频+说明).rar
04-26
【基于Java+Springboot的毕业设计】付费问答系统(源码+演示视频+说明).rar 【项目技术】 开发语言：Java 框架：Spingboot+vue 架构：B/S 数据库：mysql 【演示视频-编号：330】 https://pan.quark.cn/s/8dea014f4d36 【实现功能】 付费问答系统通过MySQL数据库与Spring Boot框架进行开发，付费问答系统能够实现新闻类型管理，问题帖子管理，付费记录管理，新闻信息管理，用户管理，轮播图管理等功能。
关于旁路电容和耦合电容-(详细说明)
最新发布
04-26
关于旁路电容和耦合电容-(详细说明)
Git 与 Simulink 测试：远程测试的最佳实践.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
重庆大学电气工程学院2011级电机学课堂测验 直流电机.pdf
04-26
重庆大学期末考试试卷，重大期末考试试题，试题及答案
LabVIEW 数据采集模板.zip
04-26
labview 与 C 和BASIC 一样，LabVIEW [2]也是通用的编程系统，有一个完成任何编程任务的庞大函数库。LabVIEW [3]的函数库包括数据采集、GPIB、串口控制、数据分析、数据显示及数据存储，等等。LabVIEW [3]也有传统的程序调试工具，如设置断点、以动画方式显示数据及其子程序（子VI）的结果、单步执行等等，便于程序的调试。 LabVIEW [2]（Laboratory Virtual Instrument Engineering Workbench）是一种用图标代替文本行创建应用程序的图形化编程语言。传统文本编程语言根据语句和指令的先后顺序决定程序执行顺序，而 LabVIEW 则采用数据流编程方式，程序框图中节点之间的数据流向决定了VI及函数的执行顺序。VI指虚拟仪器，是 LabVIEW 的程序模块。 LabVIEW [2] 提供很多外观与传统仪器（如示波器、万用表）类似的控件，可用来方便地创建用户界面。用户界面在 LabVIEW 中被称为前面板。使用图标和连线，可以通过编程对前面板上的对象进行控制。这就是图形化源代码，又称G代码。
营业额日报.xlsx
04-26
Excel数据看板，Excel办公模板，Excel模板下载，Excel数据统计，数据展示
Matlab菌丝检测识别项目.zip
04-26
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
PictureUnlock_s_678376.pictureunlock
04-26
PictureUnlock_s_678376.pictureunlock
实现HTML5 Canvas绘制时钟
06-01
好的，下面是一个简单的HTML5 Canvas绘制时钟的示例代码： ``` <!DOCTYPE html> <title>Canvas时钟 canvas { border: 2px solid black; } <canvas id="clock" width="200" height="200"></canvas> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值