【Canvas时钟】使用canvas制作简易时钟

使用canvas制作简易时钟

准备工作

创建一个画布

<style>
* {
	padding: 0;
	margin: 0;
}
</style>

<canvas id="clock" width="400" height="400"></canvas>
<!-- 创建一个400*400大小的画布 -->

获取到画布及画布绘图环境

	var clock = document.getElementById("clock");//获取到画布
	var context = clock.getContext("2d");//获取到画布绘图环境

实现静态部分

静态部分由表盘，时、分、秒刻度，1-12数字五部分组成

表盘部分

	context.beginPath();
    context.lineWidth = 10;//设置线条宽度
    context.strokeStyle = "skyblue";//设置线条颜色
    context.arc(200, 200, 150, 0, 2 * Math.PI, false);
    //画一个圆形.六个值分别代表着圆心x轴坐标，圆心x轴坐标，圆半径，起始角，结束角，顺时针画圆(该参数为可选参数)
    context.stroke();
    context.closePath();

起始角与结束角参数可参考下图

时刻度部分

	for (var i = 0; i < 12; i++) {
            context.save();
            context.beginPath();
            context.lineWidth = 8;
            context.strokeStyle = "orange";
            context.translate(200, 200);
            //translate() 方法重新映射画布上的 (0,0) 位置。即：将默认的(0,0)调整为(200,200)
            context.rotate(i * 30 * Math.PI / 180);//Math.PI为180°
            context.beginPath();
            context.moveTo(0, -150);
            context.lineTo(0, -130);
            context.stroke();
            context.closePath();
            context.restore();
    }

分、秒刻度部分

		for (var i = 0; i < 60; i++) {
            context.save();
            context.beginPath();
            context.lineWidth = 5;
            context.strokeStyle = "grey";
            context.translate(200, 200);
            context.rotate(i * 6 * Math.PI / 180);
            //在分秒刻度中，时刻度皆为5的倍数，因此取模为0跳过
            if (i % 5 != 0) {
                context.beginPath();
                context.moveTo(0, -150);
                context.lineTo(0, -140);
                context.stroke();
                context.closePath();
            }
            context.restore();
        }

1-12数字部分

		context.save();
        context.translate(200, 200);
        var r = 150; //半径
        var hourNumber = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
        context.font = 18 + 'px Arial';
        context.textAlign = 'center';
        context.textBaseline = 'middle';
        context.fillStyle = "blueviolet";
        hourNumber.forEach(function (number, i) {
            var rad = 2 * Math.PI / 12 * i; //每个数字的弧度
            /*求出数字存放位置的x和y坐标*/
            var x = Math.cos(rad) * 120;
            var y = Math.sin(rad) * 120;
            context.fillText(number, x, y);
        });
        context.restore();

将以上内容存放至方法drawStatic()中
此时效果为：

获取当前时间

声明全局变量

var now, hour, min, sec;//当前时间，小时，分钟，秒

赋值

        now = new Date();
        hour = now.getHours();
        min = now.getMinutes();
        sec = now.getSeconds();
        //小时在时钟中并非为整数，须加上分钟部分
        hour = hour + min / 60;
        //获取的时间为24小时制，时钟内为12小时制
        if (hour > 12) {
            hour -= 12;
        }

将以上内容存放至方法getTime()中

实现动态部分

动态部分由时针、分针、秒针，底部时间四部分组成

时针部分

		context.save();
        context.beginPath();
        context.lineWidth = 7;
        context.strokeStyle = "black";
        context.translate(200, 200);
        context.rotate(hour * 30 * Math.PI / 180);
        context.moveTo(0, 10);
        context.lineTo(0, -60);
        context.stroke();
        context.closePath();
        context.restore();

分针部分

        context.save();
        context.beginPath();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.translate(200, 200);
        context.rotate(min * 6 * Math.PI / 180);
        context.moveTo(0, 20);
        context.lineTo(0, -80);
        context.stroke();
        context.closePath();
        context.restore();

秒针部分

        context.save();
        context.beginPath();
        context.lineWidth = 3;
        context.strokeStyle = "black";
        context.translate(200, 200);
        context.rotate(sec * 6 * Math.PI / 180);
        context.moveTo(-3, 30);
        context.lineTo(3, 30);
        context.lineTo(0, -100);
        context.lineTo(-5, 30);
        context.fillStyle = "red";
        context.fill();
        context.stroke();
        context.closePath();
        context.restore();

底部时间显示

		context.save();
        context.font = 20 + 'px Arial'; //定义字体大小和样式
        context.textAlign = 'center'; //将文本内容居中对齐
        context.textBaseline = 'middle'; //将文本基线设置为中线
        context.fillText(Math.floor(hour) + ":" + min + ":" + sec, 200, 380);
        context.restore();

将以上内容存放至方法drawMove()中

内容整合

将上诉所有方法储存show()方法中

	function show() {
        context.clearRect(0, 0, 400, 400);
        //每秒清空一次画布 四个参数分别代表要清除的矩形范围（矩形左上角x轴坐标,矩形左上角y轴坐标,矩形宽度,矩形高度）
        drawStatic()
        getTime()
        drawMove()
    }

最后调用计时器实现每秒更新效果

	setInterval(show, 1000);

最终效果：