Canvas画布完成一个数字钟表

Canvas最初由苹果推出，后来由W3C推广，目前几乎所有浏览器都支持Canvas。

canvas是一个闭合标签，包括宽度和高度属性。默认值为宽300，高150。浏览器不支持canvas时，canvas的文本会显示，通常用来检测浏览器兼容性。

<canvas id="can" width="300" height="300">您的浏览器不支持canvas</canvas>

canvas创建完了后，主要就依靠javascript完成它的功能了~

1、在里，首先找到指定画布，然后创建2Dcontext对象。------这是写canvas必须的步骤！

var can = document.getElementById("can");
var ctx = can2.getContext("2d");

2、开始写绘制时钟函数，function drawclock()；

3、首先需要把保存函数放在最前面。然后，由于开始的canvas的中心是在容器最左上角，而我们的时钟图需要以整个canvas的中央作为圆点，因此需要用translate()，使中心居中！然后由于，默认的canvas的方向是水平向右和垂直向下的，而我们希望时钟的起始方向是x轴对着12点钟方向所以要使中心再旋转逆时针90度。以及设置线宽，线头形状和颜色。

ctx.save();ctx.translate(150, 150);
ctx.rotate(-Math.PI / 2);
ctx.lineWidth = 6;
ctx.strokeStyle = "blue";
ctx.lineCap = "round";

4、下面写表盘刻度。分两种刻度，时针、分针。时针的刻度。一共有十二个时针的刻度，每个刻度就是30度。使用for循环循环12次。每次旋转30度。每次的起点是（100,0），终点是（120,0），设置了起点终点和角度后就是用stroke()描边。

for (var i = 0; i < 12; i++) {
    ctx.beginPath();
    ctx.rotate(Math.PI / 6);
    ctx.moveTo(100, 0);
    ctx.lineTo(120, 0);
    ctx.stroke();
}     注意，这里的循环第一句是beginpath()，它的作用就是循环每执行完一次，context回到原点处。这一句不要忘了

同样的，对于分针，就是60个刻度，每个刻度就是6度。为了区分，设置线宽比时针的线宽小一点，长度也短一点，颜色也选个不一样的。

for (var k = 0; k < 60; k++) {
    ctx.strokeStyle = "red";
    ctx.beginPath();
    ctx.rotate(Math.PI / 30);
    ctx.moveTo(118, 0);
    ctx.lineTo(120, 0);
    ctx.stroke();
}

5.刻度写好了，接下来就是确定，随着时间的推移，每一秒，我们的时针和分针、秒针应该停在哪个地方。

首先新建一个日期对象，获取时、分、秒三个变量！

var time = new Date();
var s = time.getSeconds();
var m = time.getMinutes();
var h = time.getHours();
if (h > 12) {
    h -= 12;
}  这里有一个细节，因为系统时间是24h制，而我们的时钟刻度，只有12H,因此，H>12时，h-=12.

时针的旋转角度为

时针的角度=360/12*小时+360/12/60分钟+360/12/60/60秒;
//                    换算成弧度
//                    时针的弧度= π/6*小时+π/360*分钟+π/2160*秒

分针的角度

扫描二维码关注公众号，回复： 5011789 查看本文章

分针的角度=360/60*分钟+360/60/60*秒
//                    分针的弧度 =π/30*分钟+π/1800*秒

秒针的角度

 秒针的角度=360/60*秒
////                    秒针的弧度 =π/30*秒

秒针、分针、时针为了区别，它们的长度不一，起点也不一，就像我们日常中看到的那样！

然后要用restore和save恢复和保存之前的绘图设置。

ctx.save();
        ctx.lineWidth = 9;
        ctx.beginPath();
        ctx.rotate(h * (Math.PI / 6) + (Math.PI / 360) * m + (Math.PI / 21600) * s);
        ctx.moveTo(-20, 0);
        ctx.lineTo(80, 0);
        ctx.stroke();
        ctx.restore();
//                    分针的角度=360/60*分钟+360/60/60*秒
//                    分针的弧度 =π/30*分钟+π/1800*秒
        ctx.save();
        ctx.lineWidth = 7;
        ctx.beginPath();
        ctx.rotate((Math.PI / 30) * m + (Math.PI / 1800) * s);
        ctx.moveTo(-20, 0);
        ctx.lineTo(112, 0);
        ctx.stroke();
        ctx.restore();
//                    秒针的角度=360/60*秒
////                    秒针的弧度 =π/30*秒
        ctx.save();
        ctx.lineWidth = 6;
        ctx.strokeStyle = "green";
        ctx.beginPath();
        ctx.rotate((Math.PI / 30) * s);
        ctx.moveTo(-30, 0);
        ctx.lineTo(120, 0);
        ctx.stroke();
        ctx.restore()

6.需要在时钟中央绘制一个圆点，先用beginpath()让canvas回到起点，再选半径为10，用fill填充，红色。


ctx.beginPath();
ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
ctx.fillStyle = "yellow";
ctx.fill();
ctx.restore();

7.到此，好像该做的都做完了。其实不然，这样只能得到一个你打开页面时刻的时钟图，要实现动态的时钟，需要每秒刷新，这就需要用setInterval（）函数的功能，每1000ms，运行一次drawclock（）函数，这样就每一秒画一次,显示的就是时钟啦！

setInterval("drawclock()",1000);

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>practice</title>
    <style>
        canvas{
            border: 2px solid red;
        }
    </style>
</head>
<body >

<h3 >手绘时钟</h3>
<canvas id="can2" width="300" height="300">您的浏览器不支持canvas</canvas>
<script>
    var can2 = document.getElementById("can2");
    var ctx = can2.getContext("2d");
    drawclock(); //此处先引用函数是为了防止加载完页面的第一秒有空白画面。
    function drawclock() {
        ctx.save();
        ctx.clearRect(0,0,300,300);
        ctx.translate(150, 150);
        ctx.rotate(-Math.PI / 2);
        ctx.lineWidth = 6;
        ctx.strokeStyle = "blue";
        ctx.lineCap = "round";
        for (var i = 0; i < 12; i++) {
            ctx.beginPath();
            ctx.rotate(Math.PI / 6);
            ctx.moveTo(100, 0);
            ctx.lineTo(120, 0);
            ctx.stroke();
        }
        for (var k = 0; k < 60; k++) {
            ctx.strokeStyle = "red";
            ctx.beginPath();
            ctx.rotate(Math.PI / 30);
            ctx.moveTo(118, 0);
            ctx.lineTo(120, 0);
            ctx.stroke();
        }
        var time = new Date();
        var s = time.getSeconds();
        var m = time.getMinutes();
        var h = time.getHours();
        if (h > 12) {
            h -= 12;
        }
//                    时针的角度=360/12*小时+360/12/60分钟+360/12/60/60秒;
//                    换算成弧度
//                    时针的弧度= π/6*小时+π/360*分钟+π/2160*秒
        ctx.save();
        ctx.lineWidth = 9;
        ctx.beginPath();
        ctx.rotate(h * (Math.PI / 6) + (Math.PI / 360) * m + (Math.PI / 21600) * s);
        ctx.moveTo(-20, 0);
        ctx.lineTo(80, 0);
        ctx.stroke();
        ctx.restore();
//                    分针的角度=360/60*分钟+360/60/60*秒
//                    分针的弧度 =π/30*分钟+π/1800*秒
        ctx.save();
        ctx.lineWidth = 7;
        ctx.beginPath();
        ctx.rotate((Math.PI / 30) * m + (Math.PI / 1800) * s);
        ctx.moveTo(-20, 0);
        ctx.lineTo(112, 0);
        ctx.stroke();
        ctx.restore();
//                    秒针的角度=360/60*秒
////                    秒针的弧度 =π/30*秒
        ctx.save();
        ctx.lineWidth = 6;
        ctx.strokeStyle = "green";
        ctx.beginPath();
        ctx.rotate((Math.PI / 30) * s);
        ctx.moveTo(-30, 0);
        ctx.lineTo(120, 0);
        ctx.stroke();
        ctx.restore();
//                    在钟表中心绘制一个圆点.
        ctx.beginPath();
        ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
        ctx.fillStyle = "yellow";
        ctx.fill();
        ctx.restore();
    }
    setInterval("drawclock()",1000);
</script>
</body>
</html>