canvas 画简易时钟 （钟表时钟+数字时钟同步显示）

最新推荐文章于 2022-09-23 20:52:30 发布
最新推荐文章于 2022-09-23 20:52:30 发布
阅读量2.6k 收藏 10
点赞数 1
分类专栏： js 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MarkJunHao/article/details/81410721
版权

这次跟大家分享的是一个用canvas写的简易时钟，话不多说，直接上效果图：

下面是具体的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    #clock{
        width: 500px;
        height: 500px;
        margin: 100px auto 0;
        
    }
    #cvs{

        border: 1px solid chocolate;
    }
</style>
</head>
<body>
    <div id="clock">
        <canvas id="cvs" width="500" height="500"></canvas>
    </div>
    
</body>
<script type="text/javascript">
    var cvs = document.getElementById("cvs")
    var ctx = cvs.getContext('2d')
    
    function click(){
        //时钟圆盘
        ctx.beginPath()
        ctx.strokeStyle ='red'
        ctx.lineWidth = 8
        ctx.arc(250,250,200,0,2*Math.PI,true)
        ctx.closePath()
        ctx.stroke()
        
        ctx.globalCompositeOperation='destination-over'
        //时刻度
        for(var i=0;i<12;i++){
            ctx.save();
            ctx.beginPath();
            ctx.translate(250,250);
            ctx.rotate(i*30*Math.PI/180);
            ctx.strokeStyle ='#00D6B2';
            ctx.lineWidth=6;
            ctx.moveTo(0,-175);
            ctx.lineTo(0,-200);
            
            ctx.stroke()
            ctx.closePath();
            ctx.restore()
        };
        //分刻度
        for(var i=0;i<60;i++){
            ctx.save();
            ctx.beginPath();
            ctx.translate(250,250);
            ctx.rotate(i*6*Math.PI/180);
            ctx.strokeStyle ='#FEF319';
            ctx.lineWidth=4;
            ctx.moveTo(0,-185);
            ctx.lineTo(0,-200);
            ctx.stroke()
            ctx.closePath();
            ctx.restore()
        };
        //画小时数
        var hour = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
        
        hour.forEach(function(num,i){
            var rad = 2 * Math.PI / 12 * i;
            var x = Math.cos(rad) * 160;
            var y = Math.sin(rad) * 160;
          //  console.log(x,y)
            ctx.font = "18px sans-serif"
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillStyle='#FF0000';
            ctx.fill();
            ctx.fillText(num, x+250, y+250);
        });
        //获取当前时间
        var oDate = new Date
        var hour = oDate.getHours()
        var minutes = oDate.getMinutes()
        var seconds = oDate.getSeconds()
    
//        console.log(hour,minutes,seconds)
        if(hour>12){
            hour = hour-12;
            hour = hour+minutes/60;
        }
        minutes = minutes + seconds/60;
        //console.log(hour,minutes,seconds)
        
        //时针
        ctx.save();
        ctx.beginPath();
        ctx.translate(250,250);
        ctx.rotate(hour*30*Math.PI/180);
        ctx.strokeStyle ='#F44336';
        ctx.lineWidth=9;
        ctx.moveTo(0,15);
        ctx.lineTo(0,-90);
        ctx.stroke()
        ctx.closePath();
        ctx.restore()
//        
        //分针
        ctx.save();
        ctx.beginPath();
        ctx.translate(250,250);
        ctx.rotate(minutes*6*Math.PI/180);
        ctx.strokeStyle ='#A2D866';
        ctx.lineWidth=6;
        ctx.moveTo(0,20);
        ctx.lineTo(0,-130);
        ctx.stroke()
        ctx.closePath();
        ctx.restore()
        //秒针
        ctx.save();
        ctx.beginPath();
        ctx.translate(250,250);
        ctx.rotate(seconds*6*Math.PI/180);
        ctx.strokeStyle ='#F0AD4E';
        ctx.lineWidth=3;
        ctx.moveTo(0,25);
        ctx.lineTo(0,-150);
        ctx.stroke()
        ctx.closePath();
        ctx.restore()
        
        
        ctx.globalCompositeOperation='source-over'
        //中心圆
        ctx.beginPath()
        ctx.fillStyle='#60D9F8';
        ctx.strokeStyle='#00B7FF';
        ctx.lineWidth = 3;
        ctx.arc(250,250,8,0,2*Math.PI,true);
        ctx.fill();
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
        
        
        //画时间
        var h2=oDate.getHours();
        var m2=oDate.getMinutes();
        var str1=h2>9?h2:('0'+h2);
        var str2=m2>9?m2:('0'+m2);
        ctx.beginPath();
        ctx.fillStyle='#FB1F11';
        ctx.font='26px 微软雅黑';
        ctx.fillText(str1+':'+str2,250,340);
        ctx.closePath();
        
    }    
    setInterval(function(){
        ctx.clearRect(0,0,cvs.width,cvs.height)
        click()
    },1000)
</script>
</html>

 好了，到此为止，上面效果图的时钟就实现了，是不是很简单呢？

MarkJunHao
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html画表盘 随时间转动,利用css3+js实现的可拖动简易表盘时钟
weixin_36431157的博客
06-07 722
闲着无事写了一个简单的时钟效果，给新学css3的朋友做个参考吧。一、布局布局很简单，就是一个表盘加上时、分、秒三个指针。当然为了美观期间还可以加一个表心。代码如下：二、css样式设置代码如下：/*清除默认样式*/*{margin:0;padding:0;list-style:none;}/*表盘样式*/#box{width:300px;height:300px;border:1px solid #...
用js做时钟
m0_72021379的博客
10-03 89
在画指针的时候我们需要这样的属性，指针的初始点，末尾点，以及颜色，宽度。4画数字，刻度的数字跟刻度的道理是差不多的，但是，画数字是我们需要定一个点，正常情况下，这个点是这个四方字的左下角，所以，我们要将这个左下角的点定在这个方块字中间，这样，字才会处于我们想要的地方，因为每个字的宽高是不同的，就比如1和12他们的长宽是不同的，所以我们需要获取他们长宽的具体数值，再将他们的数值调用，运用到我们的这个点上，算出来这个点的位置，我们就可以将我们的1~12放置到我们需要的位置。有开始画线，就有结束画线。
canvas绘制表盘时钟
08-31
本文主要分享了canvas绘制表盘时钟的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
微信小程序使用canvas绘制实现时钟
11-01
使用canvas绘制微信小程序时钟
js Canvas实现圆形时钟教程
10-21
主要为大家详细介绍了HTML5 Canvas实现圆形时钟简易教程,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
实时显示时间（HTML+JS）
小王同志的博客
02-20 3万+
方法一：<!--setInterval实时显示时间--> <p id="time1" style="color: blueviolet;"></p> <script> function mytime(){ var a = new Date(); var b = a.toLocaleTimeString(); var c = a.toLocale
HTML页面显示时间——网页数字时钟、钟表
热门推荐
cnds123的专栏
09-02 3万+
一个HTML网页上动态显示系统时间——网页数字时钟、钟表，本文从简单到复杂给出一些例子。
CSS字体样式属性调试
Web_chicken的博客
09-08 7310
CSS字体样式属性调试 1.font-size font-size属性用于设置字号 p { font-size:20px; 2.font-family font-family用于设置字体 p { font-family:"Mirsoft YaHei"； } 网页中常用字体有宋体，微软雅黑，黑体等 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个,直到找到合适的字体，如果都没有，则以我们电脑默认的字体为准。 p { font-family:"Mirsoft YaHei"
Canvas实现自定义时钟
HYY的博客
04-04 702
实现效果 除了皮卡丘背景外的刻度线，时针分针秒针均是使用Canvas绘制出来的。 实现过程 设置基本大小及背景 1. 皮卡丘全脸素材 2. 基本结构 设置HTML结构如下： <div class="canvas-box"> <canvas width="300" height="300"></canvas> </div> 问题：这里为什么要外嵌一个div盒子呢？ 因为后续我们通过给div设置背景图片backgroun
使用Canvas(画布）完成一个时钟
guitarist0505的博客
07-17 7875
Canvas最初由苹果推出，后来由W3C推广，目前几乎所有浏览器都支持Canvas。 canvas是一个闭合标签，包括宽度和高度属性。默认值为宽300，高150。浏览器不支持canvas时，canvas的文本会显示，通常用来检测浏览器兼容性。 &lt;canvas id="can" width="300" height="300"&gt;您的浏览器不支持canvas&lt;/canvas&g...
Canvas绘制微信小程序画布时钟
03-29
微信小程序官方组件也提供了画布功能，下面分享一下如何创建微信小程序画布时钟。 总体思路是对pages中的一个小程序页面构建画布时钟逻辑程序，通过app.json公共设置来配置入口。 首先来看一下构建这样一个小程序所...
javascript canvas实现简易时钟例子
01-19
本文实例为大家分享了javascript canvas实现简易时钟的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=...
JS实现时钟
任重道远
08-31 7780
先看一下最终的效果：http://www.gongx.top/xian/time.html 不会做动图，就放到我个人网站上去了，大家可以去看一下。 本来不想记录这个，但是老师的一个操作让我突然生出一个念头： 我靠，还能这么操作？ 话不多说，开始分析一下。   结构如下： &lt;!--最外层的div --&gt; &lt;div id="wrap"&gt; &lt...
使用canvas实现简单的时钟效果
JiangLittleBai的博客
01-21 1649
这次要借助canvas实现时钟效果，展示当前时间，形状为圆形。 完整实现效果截图如上 关键点 时钟效果的实现主要分为3部分 1、绘制表盘、大小刻度、1~12 等静态部分的绘制 2、展示当前时间 3、时针、分针和秒针动起来 绘制静态部分 首先得到canvas和canvas的绘图环境 var canvas=document.getElementById("canv
Canvas绘制一个时钟
秃头小桂子
05-11 2182
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
Canvas绘制时钟
发光的萤火虫
04-07 553
一、效果图展示 二、相关代码 1.clock.html 时钟 --> *{ padding:0; margin:0; } .canvas{ border:1px solid black; margin-top:20px;
用canvas制作一个实时钟表，指针随时间改变而转动
lcplayer的博客
09-23 545
利用canvas绘制的动态实时钟表，包含有钟表指针的绘制函数，随着时间变化指针会跳动
h5：canvas绘制时钟
冲鸭
09-24 172
目录 一：顿一下 二：平滑 一：顿一下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s...
Markdown学习笔记
最新发布
04-30
Markdown学习笔记
html：canvas画布绘图简单入门-绘制数字时钟
04-07
好的，让我来回答你的问题。要绘制数字时钟，我们可以使用HTML5中的Canvas元素和JavaScript来实现。首先，我们需要创建一个Canvas元素，并设置它...希望这个简单的入门教程能够帮助你了解如何使用Canvas绘制数字时钟。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值