canvas绘制时钟

最新推荐文章于 2024-04-01 09:49:25 发布
最新推荐文章于 2024-04-01 09:49:25 发布
阅读量270 收藏 1
点赞数
分类专栏： # Canvas JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQ_Empire/article/details/81412785
版权

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{margin:0;padding: 0}
</style>
<body>
    <canvas id="cav" width="800" height="500" style="border:1px solid red"></canvas>
</body>
  <script>
       var cvs = document.getElementById("cav")
       var bi = cvs.getContext("2d")

       function biao() { 
            var x=400,y=250,r=200;

            var date = new Date()
            var shi = date.getHours();
            var fen = date.getMinutes();
            var miao = date.getSeconds();
            var hours = (-90+shi*30 + fen/2)*Math.PI/180
            var minutes = (-90+fen*6)*Math.PI/180
            var scends = (-90+miao*6)*Math.PI/180
    
         //清空表盘
          bi.clearRect(0,0,cvs.width,cvs.height)
        //分针刻盘
            bi.beginPath()
           bi.strokeStyle="blue"

            for(i= 0;i<60;i++){
                bi.moveTo(x,y)
                bi.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false)
            }
            bi.stroke()
            bi.closePath()
        //（第二层覆盖第一层中心区域）
                bi.fillStyle="#fff"
                bi.beginPath()      
                bi.moveTo(x,y)
                bi.arc(x,y,r*19/20,0,360*Math.PI/180,false)
                bi.fill()
                bi.closePath()
        //时针刻盘
           bi.beginPath()
           bi.lineWidth=3;
           bi.strokeStyle="black"
            for(i= 0;i<12;i++){
                bi.moveTo(x,y)
                bi.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false)
            }
           
            bi.stroke()
             bi.closePath()
         //（第3层覆盖第2层中心区域）
                bi.beginPath()   
                bi.fillStyle="#fff"
                bi.moveTo(x,y)
                bi.arc(x,y,r*18/20,0,360*Math.PI/180,false)
                   bi.fill()
                bi.closePath()

             
           //绘制时针 
          
              bi.beginPath()
              bi.lineWidth=5  
              bi.strokeStyle="green"                    
              bi.moveTo(x,y)
              bi.arc(x,y,r*10/20,hours,hours,false)
              bi.stroke()
              bi.closePath()
             
               //绘制分针 
           
              bi.beginPath() 
                  bi.lineWidth=3 
              bi.strokeStyle="orange"                 
              bi.moveTo(x,y)
              bi.arc(x,y,r*14/20,minutes,minutes,false)
              
              bi.stroke()
              bi.closePath()
              //绘制秒针
           bi.beginPath()
            bi.lineWidth=1
            bi.strokeStyle="red"   
              bi.moveTo(x,y)
              bi.arc(x,y,r*18/20,scends,scends,false)
              bi.stroke()
              bi.closePath()
              //绘制圆心
              bi.beginPath()
              bi.fillStyle="#000"
              bi.moveTo(x,y)
              bi.arc(x,y,r*1/30,2*Math.PI,false)
              bi.fill()
              //bi.stroke()
              bi.closePath()

         }

        biao() 
       
        setInterval(biao,1000)
        

   
  
  </script>
</html>

 

 

方法二：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>canvas 时钟</title>
    <style>
        *{margin: 0; padding: 0;}
        body{
            background: radial-gradient(#777, #000);
            background: -webkit-radial-gradient(#777, #000);
            background: -moz-radial-gradient(#777, #000);
        }
        div.dd{
            margin: 0 auto;
            width: 400px;
            padding-top: 100px;
        }
    </style>
</head>
<body>
<div class="dd">
    <canvas id="clock" height="400px" width="400px">你的浏览器不支持canvas</canvas>
</div>
<script type="text/javascript">
    (function(doc){
        var can = doc.getElementById("clock");
        var con = can.getContext("2d");//创建一个2d上下文
        con.translate(200, 200);//重新确定坐标原点（确定圆心位置）
 
        //外圆
        con.beginPath();
        con.fillStyle = '#fff';
        con.arc(0, 0, 200, 0, Math.PI*2, false);
        con.fill();
 
        //内圆
        con.beginPath();
        con.fillStyle = '#aaa';
        con.arc(0, 0, 195, 0, Math.PI*2, false);
        con.fill();
 
        //绘制刻度
        con.beginPath();
        con.font = "bold 20px sans-serif";
        con.textAlign = "center";
        con.textBaseline = "middle"
        con.fillStyle = '#000000';
        con.fillText("12", 0, -170);
        con.fillText("3",170,0);
        con.fillText("6",0,170);
        con.fillText("9",-170,0);
        con.fillText("1",84,-147.224);
        con.fillText("2",147.224,-84);
        con.fillText("4",147.224,84);
        con.fillText("5",84,147.224);
        con.fillText("7",-84,147.224);
        con.fillText("8",-147.224,84);
        con.fillText("10",-147.224,-84);
        con.fillText("11",-84,-147.224);
 
        //获取当前时间
        var d = new Date(), time ={};
        time.H = d.getHours()%12;
        time.M = d.getMinutes();
        time.S = d.getSeconds();
 
        function getTime(){
            time.S++;
            if(time.S > 59){
                time.S = 0;
                time.M++;
                if(time.M > 60){
                    time.M = 0;
                    time.H++;
                    if(time.H > 11){
                        time.H = 0;
                    }
                }
            }
            canvasTimeLine();
        }
 
        //将角度转为弧度
        function numToDeg(num){
            return ((num*6 - 90)*0.0174444444444444);
 
        }
        //确定刻度位置
        function computePositionByLenDeg(len, deg){
            return {
                x: len*Math.cos(deg),
                y: len*Math.sin(deg)
            }
        }
        //绘制刻度
        function canvasLineMintus(){
            for(var i = 0;i<60; i++){
                var rec = 180;
                con.beginPath();
                con.lineWidth = 4;
                if(i%5 != 0){
                    con.lineWidth = 1;
                    rec = 184
                }
 
                var beinDeg = numToDeg(i),
                        beginPot = computePositionByLenDeg(rec, beinDeg),
                        endPot = computePositionByLenDeg(190, beinDeg);
                con.moveTo(beginPot.x, beginPot.y);
                con.lineTo(endPot.x, endPot.y);
                con.stroke();
            }
        }
 
        function canvasTimeLine(){
            var sDeg = numToDeg(time.S),
                    mDeg = numToDeg(time.M),
                    hDeg = numToDeg(time.H*5 + Math.floor(time.M/12)),
                    sPot = computePositionByLenDeg(150, sDeg),
                    mPot = computePositionByLenDeg(135, mDeg),
                    hPot = computePositionByLenDeg(110, hDeg);
 
            //时钟表面
            con.beginPath();
            con.fillStyle = '#ddd';
            con.arc(0, 0, 156, 0, Math.PI*2, false);
            con.fill();
 
 
 
            //时针
            con.beginPath();
            con.moveTo(0, 0);
            con.lineTo(hPot.x, hPot.y);
            con.lineWidth = 6;
            con.strokeStyle = "#333";
            con.stroke();
 
            //分针
            con.beginPath();
            con.moveTo(0, 0);
            con.lineTo(mPot.x, mPot.y);
            con.lineWidth = 4;
            con.strokeStyle = "#333";
            con.stroke();
 
            //秒针
            con.beginPath();
            con.moveTo(0, 0);
            con.lineTo(sPot.x, sPot.y);
            con.lineWidth = 2;
            con.strokeStyle = "#ff0000";
            con.stroke();
 
            //针心
            con.beginPath();
            con.fillStyle = '#aaaaaa';
            con.arc(0, 0, 8, 0, Math.PI*2, false);
            con.fill();
            con.beginPath();
            con.fillStyle = '#f00';
            con.arc(0, 0, 4, 0, Math.PI*2, false);
            con.fill();
 
        }
        canvasLineMintus();
        getTime();
 
        setInterval(getTime, 1000);
 
    })(document);
</script>
</body>
</html>

 

QQ帝国
关注
专栏目录
微信小程序使用canvas绘制实现时钟
11-01
使用canvas绘制微信小程序时钟
JavaScript Canvas绘制时钟
02-22
接着，我们分别创建了`drawHourHand`、`drawMinuteHand`和`drawSecondHand`函数来绘制时钟的指针，这些函数会根据当前时间计算出对应的角度。`drawHand`是绘制指针的通用函数，它接受角度、长度、线宽和线帽样式作为...
H5 canvas 制作简易时钟
id_no_chinese的博客
07-10 1239
学习了canvas，写下自己的心得体会。1.在css中设置canvas的宽和高，发现里面的矩形和其他元素都是放大的。然后自己得出结论：1.canvas的宽高属性要写在 标签内canvas的默认宽高为300*150，如果宽高设置相对默认值的x倍，你所画的元素也会相对你设置的扩大x倍。亲自实验发现真是这样。但是这样画布中的元素宽高就不好控制了。第二天发现把 宽高以属性值的方式写到标签中时，元素和你设置...
推荐开源项目：Timeline Canvas - 基于HTML5的可交互时间线图表库
最新发布
gitblog_00007的博客
04-01 617
推荐开源项目：Timeline Canvas - 基于HTML5的可交互时间线图表库 项目地址:https://gitcode.com/liaoanran/timeline-canvas 该项目，Timeline Canvas，是一个轻量级、响应式的时间线图表生成器，基于HTML5 Canvas技术和JavaScript编写。它为开发者提供了一种简单且灵活的方式来展示历史事件、项目进度或者任何需要...
【原创】时间轴组件 timeline-canvas
jqrrgmvtk的专栏
12-17 6482
一个基于 vue 框架使用 canvas 绘制的时间轴组件，可用于视频、录像播放或实时数据展示等业务。
HTML5 Canvas绘制时钟
06-01
这篇博文“HTML5 Canvas绘制时钟”旨在介绍如何利用Canvas API创建一个实时更新的数字或指针式时钟。我们将深入探讨Canvas的基础知识、相关API以及实现时钟的具体步骤。 1. HTML5 Canvas基础 HTML5 Canvas是一个二...
JS+Canvas绘制时钟效果
10-22
总结来说，使用JavaScript和Canvas绘制时钟涉及的关键技术有：获取和设置Canvas上下文、时间的处理、坐标变换、路径绘制和线条样式控制。通过熟练掌握这些技术，你可以创建出各种复杂的图形和动画效果。
javascript+HTML5 canvas绘制时钟功能示例
10-17
### JavaScript + HTML5 canvas 绘制时钟功能知识点解析 #### HTML5 canvas 基础知识 HTML5 canvas 元素提供了一种通过JavaScript和它的Canvas绘图API来绘制图形的方式。一个 canvas 是一个矩形区域，可以通过脚本...
JavaScript html5 canvas绘制时钟效果(二)
10-22
HTML5的canvas除了可以用于绘制时钟效果，还可以用于制作各种各样的图形和动画，比如制作图表、动画小游戏等。这种技术已经成为前端开发中不可或缺的一部分，熟练掌握它能够帮助开发者制作出更加丰富和动态的网页...
使用canvas写的时间轴插件，可以实现拖动、点击返回时间点、增加录像块、放大缩小等功能
04-25
分享一个使用canvas写的时间轴插件 这是一个使用canvas写的时间轴插件，可以实现拖动、点击返回时间点、增加录像块、放大缩小等功能 在我工作项目中用在了视频回放时间轴部分 项目开发刚好用到，找了很久终于合适
timeline:使用 GWT 和 HTML5（纯 Canvas）制作的时间轴库
07-03
时间线 使用 GWT 和 HTML5 制作的时间轴库 特征： 整个小部件是一个画布。 一切都显示在里面 在 GWT 中实现 面向事件：触发事件 BrowseEvent(Date) 和 IntervalChange(Date, Date)，因此可以使用更复杂的小部件进一步扩展 支持 timezoneJS 库。 开发人员可以指定库使用的时区。 您可以在阅读更多相关信息 鼠标浏览：拖放平移，鼠标滚轮缩放 行可以使用图标和标签进行自定义 时间块可定制颜色
timeline，一个简单精美的自定义时间轴
热门推荐
q2nAmor
08-01 2万+
H-Express Library——–timeline这是母项目 H-Express 中的那个自定义时间轴view，现抽取出来分享给大家，这个自定义view比较简单，作为学习自定义view入门的朋友可不能错过了。一般可以应用在单号追踪、历史事件记录、任务完成度显示等方面，作为Recyclerview或者listview的item布局即可。先上图： 左边为H-Express中的效
【Canvas】绘制时间轴+动态当前时间线
芳草萋萋鹦鹉洲哦
07-25 2160
/一分钟的宽度，每十分钟一小格每六个小格一个大格。重要ctx赋值全局变量，以免传输中改变。//超过2030时间从2030开始显示。//计算出当前时间与830之间的差值。//绘制时间轴时间线。//绘制动态时间线。...
canvas刻画时间轴
weixin_38763607的博客
05-25 2546
给同事写的demo，顺带分享下 直接复制代码运行就行了。注释都写的很清楚啦 建议：如写时间轴之类的操作 一切单位换算成毫秒 拖动更新时间轴 其实就是更新初始时间 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { ..
Canvas时钟转动
houshufen
09-10 738
在我们的桌面上都有时钟，今天，通过canvas画布来实现这个功能，效果如下：一、canvas介绍canvas中文翻译为画布，就如同写字板，它为我们提供了一个绘画环境，我们可以在上面画自己想要画的东西。要说明的一点是canvas是通过javaScript来绘制的，想要在canvas上面画东西，我们首先必须创建一个绘画的环境：//3d绘制环境还不是很稳定 var ogc=oc.getContext("2
canvas画图，时间轴刻度标签
qq_38814363的博客
07-18 627
canvas画图，时间轴刻度标签
利用canvas封装录像时间轴拖动(uniapp),封装上传uniapp插件市场
linxd的博客
12-15 816
项目是一个空项目,其中包含了封装的插件,自己阅读,由于利用了canvas所以在使用中暂不支持.nvue,待优化;项目也是借鉴了github上的一个项目,地址找不到了,尴尬了.........
实现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、付费专栏及课程。

余额充值