html5 画布绘制时钟

最新推荐文章于 2024-05-14 10:20:04 发布
最新推荐文章于 2024-05-14 10:20:04 发布
阅读量4.6k 收藏 9
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37149421/article/details/79458325
版权

用Html5实现时钟，包括转盘时钟和电子时钟，显示当前日期时间

绘制步骤：

（1）先获取画布，设置画布的大小；

（2）在js中获取画布对象，获取画布的画笔对象，设置画笔的一些属性；

（3）获取系统当前时间，转换成时分秒，用变量保存下来；

（4）先画分钟刻度线，每6°画一条线，共60条刻度线（循环）；

（5）画时钟刻度线，每30°画一条线，相对分针长一点粗一点，共12条线

（6）画时针、分针和秒针，时针最短最粗，秒针最细最长，根据当前时间把时针，分针，秒针旋转到相应位置；

（7）接着绘制数字时钟，根据当前的时间在画布上绘制文字，显示时间日期（年月日）星期几；

（8）调用函数，并设置定时器定时执行函数，实现动态效果。

效果图：


源代码：

<!DOCTYPEhtml>

<html>

    <head>

       <meta charset="UTF-8">

       <title>时钟</title>

       <style type="text/css">

           canvas{

              margin: 100px 80px;

       }

       </style>

    </head>

    <body>

       <canvas id="clock"width="1000" height="200"></canvas>

       <scripttype="text/javascript">

           var canvas =document.querySelector("canvas");

           canvas.style.background ="blue";

           var g = canvas.getContext("2d");  

          

           //绘制转盘时钟

              function drawArcClock() {

              g.clearRect(0, 0, 100, 100);

              var data = new Date();

              var sec = data.getSeconds();

              var min = data.getMinutes();

              var hour = data.getHours();

              g.save();

              g.translate(50, 50);

              g.rotate(-Math.PI / 2);

              //分钟刻度线

              for(var i = 0; i < 60; i++) {//画60个刻度线

                  g.beginPath();

                  g.strokeStyle ="white";

                  g.lineWidth = 1;

                  g.moveTo(50, 0);

                  g.lineTo(45, 0);

                  g.stroke();

                  g.rotate(Math.PI / 30); //每个6deg画一个时钟刻度线

                  g.closePath();

              }

              //时钟刻度线

              for(var i = 0; i < 12; i++) {//画12个刻度线

                  g.beginPath();

                  g.strokeStyle ="white";

                  g.lineWidth = 2;

                  g.moveTo(50, 0);

                  g.lineTo(40, 0);

                  g.stroke();

                  g.rotate(Math.PI / 6); //每个30deg画一个时钟刻度线

                  g.closePath();

              }

             

              //画时针

              hour = hour > 12 ? hour - 12 :hour;

              g.beginPath();

              g.save();

              g.rotate(Math.PI / 6 * hour +Math.PI / 6 * min / 60 + Math.PI / 6 * sec / 3600);

              g.strokeStyle = "white";

              g.lineWidth = 3;

              g.moveTo(-10, 0);

              g.lineTo(30, 0);

              g.stroke();

              g.restore();

              g.closePath();

              //画分针

              g.beginPath();

              g.save();

              g.rotate(Math.PI / 30 * min +Math.PI / 30 * sec / 60);

              g.strokeStyle = "white";

              g.lineWidth = 2;

              g.moveTo(-5, 0);

              g.lineTo(30, 0);

              g.stroke();

              g.restore();

              g.closePath();

              //画秒针

              g.beginPath();

              g.save();

              g.rotate(Math.PI / 30 * sec);

              g.strokeStyle = "red";

              g.lineWidth = 1;

              g.moveTo(-10, 0);

              g.lineTo(35, 0);

              g.stroke();

              g.restore();

              g.closePath();

              g.restore();

           }

           //绘制数字时钟

           function drawNumClock(){

              g.clearRect(100, 0, 1200, 200);

              var data = new Date();

              var str = data.getFullYear()+"年"+(data.getMonth()+1)+"月"+data.getDate()+"日";

              var sec = data.getSeconds();

              var min = data.getMinutes();

              var hour = data.getHours();

              var day =data.getDay();         //获取当前星期

              if(day == 0){

                  day = "日";

              }

              else if(day==1){

                  day = "一";

              }

              else if(day==2){

                  day = "二";

              }

              else if(day==3){

                  day = "三";

              }

              else if(day==4){

                  day = "四";

              }

              else if(day==5){

                  day = "五";

              }

              else if(day==6){

                  day = "六";

              }

              g.fillStyle = "white";

              g.font = "100px '楷体'";

              g.lineWidth = "bolder";//字体加粗

              g.beginPath();

              g.fillText(hour,200,120);

              g.fillText(":",300,110);

              g.fillText(min,340,120);

              g.font = "70px '楷体'";

              g.fillText(sec,470,120);

              g.font = "70px '楷体'";

              g.fillText("星期",580,120);

              g.fillText(day,730,120);

              g.font = "50px '楷体'";

              g.fillText(str,580,180);

           }

           drawArcClock();

           drawNumClock();

           setInterval(drawArcClock, 1000);

           setInterval(drawNumClock, 1000);

       </script>

    </body>

</html>

 

qq_37149421
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
教你使用html+js手绘一个时钟
qq_42339210的博客
05-28 1732
一、先看一下实现的结果 二、html部分 html部分只使用了画布元素<canvas>，具体代码如下： <body> <canvas id="diagonal" width="200" height="200"></canvas> </body> 三、JavaScript部分 具体的时钟的绘制，以及时钟的动态效果都是由js实现的，具体代码如下： var canvas; function clock() { canvas = docume
html5 canvas画布绘制圆形时钟代码
09-08
在这个“html5 canvas画布绘制圆形时钟代码”示例中，我们将深入探讨如何利用Canvas API来创建一个功能完备的圆形时钟。 首先，你需要在HTML文件中创建一个`<canvas>`元素，它将作为我们的画布。例如： ```html <!...
html语言中钟表怎么做,html5制作一个时钟(示例代码)
weixin_29231263的博客
05-30 1510
试着用html5写一个时钟记得开始这个随笔是几天前，一直保存在草稿里面，一直感觉有个东西搁在在那里，所以今天熬夜也要写完这篇博客！！！哈哈...不多说来上代码和思路。---------------------------------------------------------------------------------------------其实并不难，主要看你是否掌握了canvas下面几...
html5时间同步系统,HTML5 canvas 实现同步时钟
weixin_31560425的博客
06-08 404
都说HTML5和CSS3将会是前端工作者要学习和掌握的必要技术。不错，随着各大主流浏览器之间的“互坑”性兼容问题原来越少。作为前端开发人员，趁早提前熟悉掌握此两种必要知识是很有必要的！嘎嘎。在此，小码哥讲给大家分享一下用HTML5中的canvas画布制作的同步时钟。(透露一下，此种代码并非小码哥亲自编写，知识俺将每一步解析了一下，，供大家参考哈，，惭愧，俺也在进步学习中呢！！)因此，说是原创，只是...
2024年最全html画布canvas标签的使用(附赠three(1)，最新BAT大厂面试者整理的HarmonyOS鸿蒙面试题目
最新发布
2401_84872617的博客
05-14 327
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。闭合路径就是将我们绘制的开放路径，进行封闭处理，多点的路径闭合后会形成特定的形状。使用画布中的strokeStyle属性可以定义线的描边颜色，该属性的取值为十六进制颜色值或颜色英文。使用画布中的lineWidth属性可以定义线的宽度，该属性的取值为数值（不带单位），以像素为计量。默认情况下，线的端点是方形的，通过画布中的lineCap属性可以改变端点的形状。
html5时钟在图片上画指针,html5如何使用canvas绘制“钟表”图案？（代码实例）...
weixin_42308335的博客
06-04 494
本章给大家介绍html5如何使用canvas绘制“钟表”图案？(代码实例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、介绍CanvasCanvas 是指定了长度和宽度的矩形画布，我们将使用新的HTML5 JavaScript，可使用HTML5 JS API 来画出各种图形。不过，canvas本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。现...
Html5基于Canvas画一个动态时钟
qq_35543489的博客
02-03 1394
文章目录前言一、前期准备二、绘制刻度1.流程2.效果图三、绘制文字1.流程2.效果图四、绘制指针1.取得当前时间2.绘制秒针3.绘制分针4.绘制时针5.效果图五、绘制圆心1.流程2.效果图六、让钟表动起来总结 前言 Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 Canvas API主要聚焦于2D图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。 一、前期.
HTML5 Canvas绘制时钟
06-01
这篇博文“HTML5 Canvas绘制时钟”旨在介绍如何利用Canvas API创建一个实时更新的数字或指针式时钟。我们将深入探讨Canvas的基础知识、相关API以及实现时钟的具体步骤。 1. HTML5 Canvas基础 HTML5 Canvas是一个二...
HTML5画布时钟
12-11
用HTML5的画布结合JQUERY以及CSS3.0的翻转制作的时钟，可以随时和系统时间保持一致，包括随时刷新也不影响
JavaScript html5 canvas绘制时钟效果(二)
10-22
主要介绍了JavaScript html5绘制时钟效果的相关资料，使用HTML5的canvas标签和Javascript脚本，模拟显示了一个时钟，感兴趣的小伙伴们可以参考一下
html5基于canvas画布绘制的圆形时钟效果源码.zip
11-03
本案例中的"html5基于canvas画布绘制的圆形时钟效果源码.zip"正是利用这一特性，创建了一个实时更新的圆形时钟。 首先，`canvas`元素在HTML中被声明，通常伴随着`id`属性以便于JavaScript进行操作： ```html ...
canvas绘制时钟
01-29
利用html5中的canvas绘制的时钟，动态的呈现当前的时分秒
[HTML5] 用CANVAS画时钟
不积跬步无以至千里
02-23 453
本篇文章的所有代码转自 ACdreamers 的《第一个Canvas实例-钟表》 。原文地址为http://blog.csdn.net/acdreamers/article/details/17634209 本文主要是对代码中所使用的方法进行详细说明，虽然原作者在代码已经注释得很清楚了。 一、.获取上下文对象     var cxt = document.getElementBy
Html5学习--------canvas编写简单钟表
爱阿踢，爱歪be
10-27 2023
body{background-color:Blue;} #showCanvas{background-color:white;} window.onload = function () { var canvasElt = document.getElementById("showCanvas"); function clockdrow() { if (canvasElt
web手绘时钟
weixin_43643900的博客
05-26 607
web手绘时钟 在这里插入代码片 <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>18101306康世龙手绘时钟</title> </head> <body οnlοad="drawClock()"> <h2><br>时钟</h2> <hr /> <canvas id="clockCa
html5画布时钟cnsd,canvas动画时钟
weixin_28025327的博客
06-28 211
最近在学canvas，然后根据MDN上的例子做了个动画时钟(为什么要造个轮子，因为丑。。)这是MDN上的例子，怎么说呢，比较复古吧。首先，找一张时钟的图片，就是下面这张了。——来自bigger than bigger的dribbble网站，图片来源(侵删)然后就开始用canvas实现这个逼格满满的时钟吧。在html代码中插入canvas标签在js文件中创建画布(假设我们使用的都是现代浏览器)。fu...
html画布实现一个时钟应用
代码的世界
07-03 1004
//核心js逻辑 var canvas=document.getElementById("canvas"); var cobj=canvas.getContext("2d"); var originx=250; var originy=250; var radius=200; // 添加阴影 setInterval(watch, 1000) fu
Html5使用Canvas绘制时钟动画效果
setsunadoudou的博客
09-19 419
HTML5支持canvas了，我们可以直接在页面上绘图了，我看了下canvas和GDI+的接口差不多，所以我们先了解些基本的概念和方式，然后来做一个应用吧。 我们做所有的画之情需要一个画布，html的...
在网页中用画布标记绘制时钟
05-17
好的，以下是一个简单的用画布绘制时钟的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas Clock</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="clock" width="400" height="400"></canvas> <script> const canvas = document.getElementById("clock"); const ctx = canvas.getContext("2d"); const radius = canvas.width / 2; ctx.translate(radius, radius); radius *= 0.9; drawClock(); function drawClock() { drawFace(ctx, radius); drawNumbers(ctx, radius); drawTime(ctx, radius); } function drawFace(ctx, radius) { ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2*Math.PI); ctx.fillStyle = "white"; ctx.fill(); ctx.lineWidth = radius*0.1; ctx.strokeStyle = "black"; ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); ctx.fillStyle = "#333"; ctx.fill(); } function drawNumbers(ctx, radius) { ctx.font = radius*0.15 + "px arial"; ctx.textBaseline = "middle"; ctx.textAlign = "center"; for(let num = 1; num <= 12; num++) { const angle = num * Math.PI / 6; const x = radius * 0.85 * Math.sin(angle); const y = -radius * 0.85 * Math.cos(angle); ctx.fillText(num.toString(), x, y); } } function drawTime(ctx, radius) { const now = new Date(); let hour = now.getHours(); let minute = now.getMinutes(); let second = now.getSeconds(); hour = hour % 12; hour = (hour*Math.PI/6) + (minute*Math.PI/(6*60)) + (second*Math.PI/(360*60)); drawHand(ctx, hour, radius*0.5, radius*0.07); minute = (minute*Math.PI/30) + (second*Math.PI/(30*60)); drawHand(ctx, minute, radius*0.8, radius*0.07); second = (second*Math.PI/30); drawHand(ctx, second, radius*0.9, radius*0.02); } function drawHand(ctx, pos, length, width) { ctx.beginPath(); ctx.lineWidth = width; ctx.lineCap = "round"; ctx.moveTo(0, 0); ctx.rotate(pos); ctx.lineTo(0, -length); ctx.stroke(); ctx.rotate(-pos); } setInterval(drawClock, 1000); // Update the clock every second </script> </body> </html> ``` 这个示例代码中，我们首先定义了一个画布，并且设置了它的宽高和边框。然后我们在 JavaScript 中获取到这个画布，并且获取到它的上下文，然后设置画布的中心点和半径。 接着，我们定义了几个绘制时钟的函数：`drawFace` 用来绘制时钟的表盘，`drawNumbers` 用来绘制时钟的数字，`drawTime` 用来绘制时钟的指针，`drawHand` 用来绘制单个指针。 最后，我们在 `drawClock` 函数中调用这些函数来绘制时钟，并且通过 `setInterval` 函数来每秒更新一次时钟。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值