使用canvas画一个时钟

使用canvas画一个时钟

  介绍一下如何使用 HTML5 的 canvas 标签和 JavaScript 画一个时钟。
  可以点击这里看看效果。

  目录：

---

创建 canvas 标签

<div>
    <canvas id="clock" width="200px" height="200px"></canvas>
</div>

值得注意的是，要使用Canvas元素，必须设置其width和height属性，制定绘图区域大小。

---

获取canvas元素并创建上下文对象

//获取上下文
var ctx = document.querySelector("#clock").getContext('2d');

//获取canvas的宽和高
var width = ctx.canvas.width;
var height = ctx.canvas.height;

//设置时钟的半径
let r = width / 2;

  如果我们要在这块画布上绘图，需要取得绘图上下文，通过调用 getContext() 方法并传入上下文名字获取。
  getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
  在这里，我们还获取了 canvas 元素的宽和高，设置时钟的半径为画布宽度的一半。

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素(仅仅返回匹配指定选择器的第一个元素)。如果需要返回所有的元素，可以使用 querySelectorAll() 方法替代。

---

画时钟的整体骨架

function draw(){
   
    //保存画布状态
    ctx.save();

    //清除画布内容
    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);
    //画秒针
    drawSecond(second);
    //画时钟的原点
    drawDot();

    //还原画布原始状态
    ctx.restore();
}

  ctx.save() 和 ctx.restore() 是两个相互匹配的方法，他们的作用是保存当前环境的状态和返回之前保存过的路径状态和属性。我们需要知道的是，当我们对画布进行旋转、缩放、平移等操作的时候，其实我们不是单单为某一特定的元素进行操作而是对整个画布进行了操作，那么问题就产生了，每次操作都会使所有在画布上的元素受到影响，所以我们在进行操作之前都需要调用 ctx.save() 来保存画布当前的状态，操作结束之后调用 ctx.restore() 取出之前保存过的状态，这样就可以避免对其他的元素进行影响。
  在这里，我们一开始对画布状态实现了保存，当时钟都画完之后，我们再对时钟的初始状态进行还原，这样就不会影响下一秒画时钟时画布的状态了。
  其实，用 canvas 本身就是一个静态画面，要实现动画，就是不停地擦除原来画布上的内容然后画上新的内容，我们只需要一秒钟重绘一次就能实现我们的时钟动画了。
  ctx.clearRect(x, y, width, height) 方法的作用是在给定的矩形内清除指定的像素，我们在每次重绘时钟之前就使用这个方法来清除画布上的内容然后画上下一秒时钟的内容。
  在每次画时钟之前，我们还需要获取当前实时的时间，我们创建了 Date 对象，然后调用它的 getHours()、getMinutes()、getSeconds() 方法获取当前时间的小时数、分钟数、秒数。
  然后我们就可以一步步的把时钟画出来了。

创建 Date 实例能用来处理日期和时间。（关于 Date 对象的知识可以看看这里）</