HTML5 Canvas实现圆形时钟简易教程

最新推荐文章于 2024-04-09 14:02:54 发布
最新推荐文章于 2024-04-09 14:02:54 发布
阅读量1.6k 收藏 1
点赞数 2
分类专栏： HTML5/CSS3 文章标签： html5 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jakioneplus/article/details/52562641
版权

十分感谢segmentfault thewindsword的指引。文章传送门：点击打开链接


阅读本文需要一点关于canvas基本用法的基础，读者如需了解，可以通过w3c或其他网站先行简单学习它的教程。

Mozilla.org上关于canvas元素的教程直通车：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Canvas_tutorial

阅读本文，只需要了解教程前两小节的内容，但是如果读者有兴趣，不妨继续深入阅读。


第一步：新建一个最简单的html文件，并且在<body>标签中定义元素canvas。

canvas.html

<html>
  <head>
    <title>Canvas clock tutorial</title>
  </head>
  <body>
    <canvas id="clock" width="400" height="400"></canvas>
  </body>
</html>

在这一步完成后，用浏览器打开canvas.html，你会发现什么都看不到，这是因为我们没有在canvas上绘制任何东西，同时也没有为其定义边界。

在canvas .html中为<canvas>添加css样式属性：

<html>
  <head>
    <title>Canvas clock tutorial</title>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body>
    <canvas id="clock" width="400" height="400"></canvas>
  </body>
</html>

这样，我们就能看到<canvas>的轮廓。

当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。
注意: 如果你绘制出来的图像是扭曲的, 尝试在<canvas>的属性中明确规定宽和高，而不是使用CSS。


第二步：新建实现绘制圆形时钟逻辑的draw.js文件，进行初始化工作。

毫无疑问，要实现时钟，就需要获取系统时间。

在js语法中，可以利用Date()来实时获取时间。

var currentTime = new Date();

随后，要掌握的是canvas绘制圆形的函数：

arc(x, y, radius, startAngle, endAngle, anticlockwise)
该方法表示画一个以（x,y）为圆心的、以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认顺时针（true））来生成。

其中stratAngle和endAngle的单位并不是我们所熟悉的角度单位，而是弧度单位。一个完整的圆跨弧度2π。

在canvas的坐标系中，是以x轴正方向所在的方向为0弧度。时钟指针按顺时针方向转，以2π为一个周期，因此如下图所示，时钟指针，是从(-1/2)*π位置开始走的。


当前时间的弧度计算方式如下：

//将一个时钟周期12等分，对12求余是因为Date().getHours将返回24小时制的小时。
hour = (currentTime.getHours() % 12 ) * (2 * Math.PI /12);  
//MINUTE 一圈60等分
minute = (currentTIme.getMinutes) * (2* Math.PI / 60);  
//SECOND 一圈60等分
second = (currentTime.getSeconds) * (2 * Math.PI / 60);

由于在canvas中时钟圆从(-1/2)*π开始走，因此我们还需要给它们加上(-1/2)*π的起始偏移量。

初步得到draw.js:

function draw() {
  //canvas绘画的前提工作
  var canvas = document.getElementById('clock');
  var currentTime = new Date();
  var hour = (currentTime.getHours()%12) * Math.PI/6;
  var minute = currentTime.getMinutes() * Math.PI/30;
  var second = currentTime.getSeconds() * Math.PI/30;
  hour = hour - Math.PI * (1/2);
  minute = minute - Math.PI * (1/2);
  second = second - Math.PI * (1/2);
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.arc(200,200,50,Math.PI*(-1/2),hour,false);
    ctx.moveTo(200,100);
    ctx.arc(200,200,100,Math.PI*(-1/2),minute,false);
    ctx.moveTo(200,50);
    ctx.arc(200,200,150,Math.PI*(-1/2),second,false);
    ctx.stroke();
  }
}


同时在canvas.html中 加入draw.js的引用。

<html>
  <head>
    <title>Canvas clock tutorial</title>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
    <script src="draw.js" type="text/javascript"></script>
  </head>
  <body οnlοad="draw();">
    <canvas id="clock" width="400" height="400"></canvas>
  </body>
</html>

在完成了第二步之后，我们可以看到一个当前时间的圆形时钟轮廓。那么接下来，就是让它动起来！


第三步：使用requestAnimationFrame()方法让时钟动起来。

requestAnimationFrame()的执行频率是1秒60帧，用户可以在requestAnimationFrame定义事件，使其在每一帧中重复、迭代完成相应的事件。

在我们这个案例中，每一帧里面requestAnimationFrame要做的事情很简单，为当前时间的三个参数（时针、分针、秒针）添加增量，然后重新绘制时钟。

根据一秒60帧的频率，那么second在1帧里面的增量是：2*π / 60 / 60 = π / 1800；

minute在一帧里面的增量是second增量的60分之一；hour在一帧里面的增量是minute的12分之1。

另外：当hour、minute、second任一一个变量到达3/2*π后，意味着完成了一个周期，就要重新初始化为(-1/2)*π，否则会覆盖绘制成一个圆。

由此得到：requestAnimationFrame()函数中，hour，minute，second的更新过程如下：

      var s = Math.PI / 1800;
      var m = s / 60;
      var h = m / 12;
      second = second + s;
      minute = minute + m;
      hour = hour + h;
      if(second >= Math.PI * (3/2)){
        second = Math.PI * (-1/2);
      }
      if(minute >= Math.PI * (3/2)){
        minute = Math.PI * (-1/2);
      }
      if(second >= Math.PI * (3/2)){
        second = Math.PI * (-1/2);
      }</span>

更新draw.js的完整代码如下： 

function draw() {
  var canvas = document.getElementById('clock');
  var currentTime = new Date();
  var hour = (currentTime.getHours()%12) * Math.PI/6;
  var minute = currentTime.getMinutes() * Math.PI/30;
  var second = currentTime.getSeconds() * Math.PI/30;
  hour = hour - Math.PI * (1/2);
  minute = minute - Math.PI * (1/2);
  second = second - Math.PI * (1/2);
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    var s = Math.PI / 1800;
    var m = s / 60;
    var h = m / 12;
    var rotate = requestAnimationFrame(step);
    function step(){
      second = second + s;
      minute = minute + m;
      hour = hour + h;
      if(second >= Math.PI * (3/2)){
        second = Math.PI * (-1/2);
      }
      if(minute >= Math.PI * (3/2)){
        minute = Math.PI * (-1/2);
      }
      if(second >= Math.PI * (3/2)){
        second = Math.PI * (-1/2);
      }
      ctx.clearRect(0, 0, 400 , 400);
      ctx.beginPath();
      ctx.arc(200,200,50,Math.PI*(-1/2),hour,false);
      ctx.moveTo(200,100);
      ctx.arc(200,200,100,Math.PI*(-1/2),minute,false);
      ctx.moveTo(200,50);
      ctx.arc(200,200,150,Math.PI*(-1/2),second,false);
      ctx.stroke();
      requestAnimationFrame(step);
    }
  }
}

到这步为止，我们已经得到了一个会动的圆形时钟，接下来，我们为其添加上指针。


第四步*：添加时针、分针、秒针。

JS为我们提供了Math.cos() 、Math.sin() 计算指针到达的位置，它们所接收参数的单位也都是弧度。

function draw() {
  var canvas = document.getElementById('clock');
  var currentTime = new Date();
  var hour = (currentTime.getHours()%12) * Math.PI/6;
  var minute = currentTime.getMinutes() * Math.PI/30;
  var second = currentTime.getSeconds() * Math.PI/30;
  hour = hour - Math.PI * (1/2);
  minute = minute - Math.PI * (1/2);
  second = second - Math.PI * (1/2);
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    var s = Math.PI / 1800;
    var m = s / 60;
    var h = m / 12;
    var rotate = requestAnimationFrame(step);
    function step(){
      second = second + s;
      minute = minute + m;
      hour = hour + h;
      if(second >= Math.PI * (3/2)){
        second = Math.PI * (-1/2);
      }
      if(minute >= Math.PI * (3/2)){
        minute = Math.PI * (-1/2);
      }
      if(second >= Math.PI * (3/2)){
        second = Math.PI * (-1/2);
      }
      //秒针的终点
      xs = 150 * Math.cos(second) + 200;
      ys = 150 * Math.sin(second) + 200;
      //分针的终点
      xm = 100 * Math.cos(minute) + 200;
      ym = 100 * Math.sin(minute) + 200;
      //时针的终点
      xh = 50 * Math.cos(hour) + 200;
      yh = 50 * Math.sin(hour) + 200;

      ctx.clearRect(0, 0, 400 , 400);
      ctx.beginPath();
      //绘制指针
      ctx.moveTo(200,200);
      ctx.lineTo(xs,ys);
      ctx.moveTo(200,200);
      ctx.lineTo(xm,ym);
      ctx.moveTo(200,200);
      ctx.lineTo(xh,yh);
      //绘制圆形轮廓
      ctx.moveTo(200,150);
      ctx.arc(200,200,50,Math.PI*(-1/2),hour,false);
      ctx.moveTo(200,100);
      ctx.arc(200,200,100,Math.PI*(-1/2),minute,false);
      ctx.moveTo(200,50);
      ctx.arc(200,200,150,Math.PI*(-1/2),second,false);
      ctx.stroke();
      requestAnimationFrame(step);
    }
  }
}

嗯嗯，虽然指针是画出来了，都是我略感后悔，因为感觉太丑了。从审美学角度而言，带指针时钟就应该是个全圆轮廓的时钟。不知道读者有没有同感。我决定在第五步中把第四步回退了。


第五步：个性化、美化、自定义你的时钟。

html5的canvas画布，提供了多种样式属性，如线条颜色、线条粗细等等。

为了提高代码的可重用性，我们将画圆的代码抽象成一个函数。

function draw() {
  var canvas = document.getElementById('clock');
  var currentTime = new Date();
  var hour = (currentTime.getHours()%12) * Math.PI/6;
  var minute = currentTime.getMinutes() * Math.PI/30;
  var second = currentTime.getSeconds() * Math.PI/30;
  hour = hour - Math.PI * (1/2);
  minute = minute - Math.PI * (1/2);
  second = second - Math.PI * (1/2);
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    var s = Math.PI / 1800;
    var m = s / 60;
    var h = m / 12;
    var rotate = requestAnimationFrame(step);
    function step(){
      second = second + s;
      minute = minute + m;
      hour = hour + h;
      if(second >= Math.PI * (3/2)){
        second = Math.PI * (-1/2);
      }
      if(minute >= Math.PI * (3/2)){
        minute = Math.PI * (-1/2);
      }
      if(second >= Math.PI * (3/2)){
        second = Math.PI * (-1/2);
      }

      ctx.clearRect(0, 0, 400 , 400);
      ctx.beginPath();
      //绘制圆形轮廓
      drawCircle(ctx, 100, hour, '#99ff00');
      drawCircle(ctx, 120, minute, '#99ff66');
      drawCircle(ctx, 140, second, '#66cc66');
      requestAnimationFrame(step);
    }
  }
}

function drawCircle(ctx, radius ,endAngle, color){
  ctx.beginPath();
  ctx.moveTo(200,200-radius);
  ctx.strokeStyle = color;
  ctx.lineWidth = 20;
  ctx.arc(200,200,radius,Math.PI*(-1/2),endAngle,false);
  ctx.stroke();
}


第六步（后续添加）：为时钟添加数字指数。

具体做法为多增加一个画布canvas元素。既然我们已经能从Date()中获取时间，那么显示数值的来源不成问题。读者唯一需要知道的就是利用setInterval(thingstodo(),interval)方法来实现每秒更新一次指数。

修改后的canvas.html

<html>
  <head>
    <title>Canvas clock tutorial</title>
    <style type="text/css">
      canvas { border: 1px solid black; }
      #display {position: absolute; top:8; left:8;}
    </style>
    <script src="draw.js" type="text/javascript"></script>
  </head>
  <body οnlοad="draw();">
    <canvas id="clock" width="400" height="400"></canvas>
    <canvas id="display" width="400" height="400"></canvas>
  </body>
</html>

修改后的draw.js 

function draw() {
  var canvas = document.getElementById('clock');
  var displayCanvas = document.getElementById('display');
  var currentTime = new Date();
  var hour = (currentTime.getHours()%12) * Math.PI/6;
  var minute = currentTime.getMinutes() * Math.PI/30;
  var second = currentTime.getSeconds() * Math.PI/30;
  hour = hour - Math.PI * (1/2);
  minute = minute - Math.PI * (1/2);
  second = second - Math.PI * (1/2);
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    var ctxD = displayCanvas.getContext('2d');
    showDisplay(ctxD, currentTime);
    var s = Math.PI / 1800;
    var m = s / 60;
    var h = m / 12;
    var rotate = requestAnimationFrame(step);
    function step(){
      second = second + s;
      minute = minute + m;
      hour = hour + h;
      if(second >= Math.PI * (3/2)){
        second = Math.PI * (-1/2);
      }
      if(minute >= Math.PI * (3/2)){
        minute = Math.PI * (-1/2);
      }
      if(second >= Math.PI * (3/2)){
        second = Math.PI * (-1/2);
      }

      ctx.clearRect(0, 0, 400 , 400);
      ctx.beginPath();
      //绘制圆形轮廓
      drawCircle(ctx, 100, hour, '#99ff00');
      drawCircle(ctx, 120, minute, '#99ff66');
      drawCircle(ctx, 140, second, '#66cc66');
      requestAnimationFrame(step);
    }
  }
}

function drawCircle(ctx, radius ,endAngle, color){
  ctx.beginPath();
  ctx.moveTo(200,200-radius);
  ctx.strokeStyle = color;
  ctx.lineWidth = 20;
  ctx.arc(200,200,radius,Math.PI*(-1/2),endAngle,false);
  ctx.stroke();
}

function showDisplay(ctx, date){
  var h = date.getHours(),m = date.getMinutes(),s = date.getSeconds();
  //计时文字样式
   ctx.font = "13px Sans-Serif";
  ctx.textAlign = "center";
  ctx.strokeText(h+":"+m+":"+s,200,200);
  var timmer = setInterval(function(){
    s++;
    if(s>=60){
      m++;
      s=0;
    }
    if(m>=60){
      h++;
      m=0;
    }
    if(h>=24){
      h=0;
    }
    ctx.clearRect(0,0,400,400);
    ctx.strokeText(h+":"+m+":"+s,200,200);
  },1000);
}

最终成果图如下：


jakioneplus
关注
专栏目录
JavaScript canvas 绘制圆形时钟
David学习笔记
04-19 1374
canvas 绘制时钟
html怎么在一个圆形时钟,用html+css+javascript制作圆形时钟
weixin_27890975的博客
07-02 819
制作好的效果如下： 表盘、刻度和数字全都是用html+css完成的。html+css代码如下：圆形时钟#div1{width: 500px;height: 500px;border:1px solid black;border-radius: 50%;margin: auto;position: relative;}.clockPanel{width: 500px;border-top: 1px ...
用html+css+javascript制作圆形时钟
weixin_30807779的博客
02-23 367
　　制作好的效果如下： 　　表盘、刻度和数字全都是用html+css完成的。 　　html+css代码如下： <!DOCTYPE html> <html> <head> <title>圆形时钟</title> <style type="text/css"> #div1{ width: 5...
html5绘制圆形钟表,HTML5 Canvas实现圆形钟表代码演示
weixin_42505792的博客
06-16 293
function init(){clock();setInterval(clock,1000);}function clock(){var now = new Date();var ctx = document.getElementById('canvas').getContext('2d');ctx.save();ctx.clearRect(0,0,150,150);ctx.translate(...
html时间代码简单,html5简洁圆形时钟代码
weixin_39758956的博客
06-05 429
特效描述：html5 简洁圆形时钟。html5简洁圆形时钟代码代码结构1. HTML代码var can=document.getElementById("can")var ctx=can.getContext("2d")function timer(){ctx.clearRect(0,0,500,500)ctx.beginPath()ctx.lineWidth=10ctx.strokeStyle=...
html5 canvas圆形时钟代码.zip
07-05
html5 canvas圆形时钟代码是一款采用canvas画布实现的本地时钟代码下载。
html5基于canvas实现的简易圆形本地时钟效果源码.zip
11-04
在这个项目中，我们将会看到如何使用Canvas API的`drawRect()`、`arc()`、`fillText()`等方法来构建一个圆形时钟的外观，并通过`requestAnimationFrame()`来实现时间的动态更新。 首先，我们需要在HTML文档中创建一...
javascript结合Canvas 实现简易的圆形时钟
10-24
本文主要讲解了使用JavaScript结合Canvas API实现一个简易的圆形时钟的过程，强调了HTML5中Canvas元素的应用。通过实践学习Canvas的基本使用，可以加深对这一Web前端技术的理解。文章首先介绍了HTML和JavaScript的...
html5 canvas画布绘制圆形时钟代码
09-08
html5 canvas画布绘制圆形时钟代码
CSS3圆形时钟代码
08-23
CSS3圆形时钟代码，纯CSS代码，立体阴影效果时钟。
html css 圆圈数字,html5 css3带日期的圆形数字电子时钟代码
weixin_34907135的博客
05-31 671
特效描述：html5 css3 带日期 圆形数字 电子时钟代码。HTML5+CSS3圆形数字电子时钟。代码结构1. 引入JS2. HTML代码654321121110987$(function(){var clock = document.getElementById("clock");function initNumXY(){// 1、12个数字的位置设置var radius = 160;//大...
html制作圆盘时钟,jquery+html5制作超酷的圆盘时钟表
weixin_29023445的博客
06-30 826
自己封装的一个用HTML5+jQuery写的时钟表代码：超酷数码钟表//引用的是在线jquery地址，如果不行请自行下载切换(function($){$.fn.drawClock = function(options){var mainId = $(this);//设置默认参数var defaultOptions = {'width': '300px','height': '300px','mar...
用html5按照时间绘制圆圈,利用纯html5绘制出来的一款非常漂亮的时钟
weixin_29705519的博客
05-31 202
gradientTransform="rotate(90 .5 .5)">gradientTransform="rotate(-90 .5 .5)">gradientTransform="rotate(-90 .5 .5)">gradientTransform="rotate(-90 .5 .5)">gradientTransform="rotate(90 .5 .5)"&...
使用 HTML、CSS 和 JavaScript 的简单模拟时钟
最新发布
2401_84010836的博客
04-09 521
正如你在上面的演示中看到的，我在这个手表周围使用了一个边框来制作代码边框：7px solid #282828。如果你想让这款手表更大，你可以增加它的尺寸。这意味着这款手表的指针没有任何功能，也没有显示准​​确的时间。结果，长线的中间被覆盖，并且它具有完整的 1 到 12 个标记大小。使用下面的 JavaScript，我已经给出了如何旋转这些手的说明。在这个单元格中，我使用了三只手，它们是使用下面的 HTML 和 CSS 代码制作的。我已经在下面充分解释了这段 JavaScript 代码是如何工作的。
JavaScript圆形钟表效果代码实例
Return_KB的博客
01-10 1490
分享一段代码实例，它实现了利用js实现了自动读取本地时间的圆形钟表效果。 代码实例如下: 001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044045046047048049050051
制作圆形时钟
weixin_42159343的博客
11-16 790
闲来无事做个时钟来玩玩 用canvas 绘制时钟的大圆，使用动画让指针按照对应的时间速度转动 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&
第一次写js效果——圆角小时钟
筷子
09-16 293
nav  #clock{     font-size:14px;     padding: 10px;     background-color: #dff;     border:2px solid black;     border-radius: 10px;      }  function displayTime(){     var elt=docume
圆形时间html,html5 canvas实现圆形时钟代码分享
weixin_42361933的博客
06-05 421
复制代码代码如下:HTML CLOCK你的浏览器不支持canvas标签，时针显示不出来哦！//画布背景颜色var clockBackGroundColor = "#ABCDEF";//时针颜色var hourPointColor = "#000";//时针粗细var hourPointWidth = 7;//时针长度var hourPointLength = 100;//分针颜色var minPo...
HTML5 Canvas实现圆形时钟步骤解析
"这篇教程介绍了如何使用HTML5的Canvas API创建一个圆形时钟。通过学习，读者将了解Canvas的基本操作，包括定义元素、设置样式、获取系统时间以及使用Canvas的绘图方法，如`arc()`和`stroke()`来绘制圆和线条。" 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值