二、基础操作实践 时钟程序

前言

这一篇笔记我会按照编码的思考顺序来写，所以会比较长。那么废话不多说，首先是分析实现目标

时钟

如图，显然，我们需要绘制一个圆，3根线段，以及一圈分布在圆上的刻度。下面开始正式编码

正文

一、画布和绘制入口

html部分

<canvas id="canvas" width="600" height="300">
        Canvas not supported
</canvas>

js部分

// 默认写法，定义画布和绘画空间
var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');

function test(){}

test()

直接写方法调方法就可以了

二、圆

// 全局变量
var RADIUS = 40;
/* 
 * 画圆的方法
 * */
function drawCircle() {
    // 开始一条路径（注意，只是开始，没有创建和绘制）
    context.beginPath();
    // 创建弧线的方法 (圆心的x坐标,圆心的y坐标,r半径,起始角弧度,结束角弧度,是否逆时针绘制)
    context.arc(canvas.width / 2, canvas.height / 2, RADIUS, 0, Math.PI * 2, true);
    context.stroke();
    // context.fill();
}

drawCircle();

1、beginPath是开始一条新路径的方法，如果不写这个函数的画，不管后面怎么移动画笔，画的都是同一路径（不一定相连），最明显的影响是颜色的覆盖。以下是参考资料
canvas使用之beginPath()函数踩坑记_CjmHW的博客-CSDN博客
2、arc()是绘制圆或部分圆的曲线的方法，需要传入圆心，半径，开始结束位置和绘制方向，起始角0所对应的位置是时钟3点的位置
3、stroke会画边，fill()则是填充。如图

stroke()
fill()
注：弧度的相关数学知识

定义：弧长等于半径的弧，其所对的圆心角为1弧度。
弧度是角的度量单位。它是由国际单位制导出的单位，单位缩写是rad。
那么显然，360°的圆心角所对应的弧度是圆周长，也就是2Πr

arc()方法是根据半径和弧度来画圆的，而Math提供了PI属性，我们也据此传值

4、然后我们可以据此绘制表盘和表心

// 全局变量
var MARGIN = 35;
var RADIUS = canvas.width / 2 - MARGIN;
/* 
 * 画表盘
 * */
function drawCircle() {
    // 开始一条路径（注意，只是开始，没有创建和绘制）
    context.beginPath();
    // 创建弧线的方法 (圆心的x坐标,圆心的y坐标,r半径,起始角弧度,结束角弧度,是否逆时针绘制)
    context.arc(canvas.width / 2, canvas.height / 2, RADIUS, 0, Math.PI * 2, true);
    context.stroke();
    // context.fill();
}
/* 
 * 画表心
 * */
function drawCenter() {
    context.beginPath();
    context.arc(canvas.width / 2, canvas.height / 2, 5, 0, Math.PI * 2, true)
    context.fill()
}

画布定为了600，边距空出35，下图是效果

效果

三、刻度数字

function drawNumerals() {
    let numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        angle = 0,
        numeralWidth = 0,
        textX,
        textY;
    numerals.forEach(numeral => {
        angle = Math.PI / 6 * (numeral - 3);
        // 获取刻度数字的文本宽度
        numeralWidth = context.measureText(numeral).width;
        // 计算每个数字的位置
        textX = canvas.width / 2 + Math.cos(angle) * HAND_RADIUS - numeralWidth / 2;
        textY = canvas.height / 2 + Math.sin(angle) * HAND_RADIUS + FONT_HEIGHT / 3;
        context.fillText(numeral, textX, textY);
}

1、context.measureText(text)
这个方法将返回一个测量字符串属性的对象TextMetrics，包含被测量字符串的信息（比如宽度），详细内容参考api
CanvasRenderingContext2D.measureText() - Web API 接口参考 | MDN (mozilla.org)
2、context.fillText(numeral, x, y);
把文本绘制到x,y的坐标所在位置
注意：x轴的0在最左侧，越往画布右侧越大，x的值是相对与文本的最左侧计算的；y轴的0在最上部，越往画布下越大，y的值是相对于文本的最底部计算的。如图：

context.fillText(numeral, 0, 10)x轴设为0 context.fillText(numeral, 10, 1)y轴设为1

注：计算数字刻度位置的数学知识

1、因为使用arc()函数画圆时，是把3点钟作为0弧度，所以我们也把3点视为0角度的基点。显然，3的x坐标为二分之一个画布宽度加上数字刻度所对应圆周的半径（即表盘半径+间距），再减去二分之一的字体宽度。

即：x = canvas.width / 2 +HAND_RADIUS - numeralWidth / 2;

2、再观察1，显然他们的x坐标为二分之一个画布宽度加上数字刻度所对应圆周的半径乘以cos(60°)，再减去二分之一的字体宽度。

即：x = canvas.width / 2 +HAND_RADIUS*cos(60°) - numeralWidth / 2;

3、在js种提供了Math.cos(x)方法，x是弧度。我们转化一下，一周角是2Π，进行12等分，也就是说一个相邻数字夹角是Π/6，把数字3所在的角度视为0，要求:

n == 3时，x = canvas.width / 2 +HAND_RADIUScos(0) - numeralWidth / 2;
n == 4时，x = canvas.width / 2 +HAND_RADIUScos(Π/6) - numeralWidth / 2;
n == 2时，x = canvas.width / 2 +HAND_RADIUScos(-Π/6) - numeralWidth / 2;
n == 5时，x = canvas.width / 2 +HAND_RADIUScos(Π/62) - numeralWidth / 2;
即 x = canvas.width / 2 +HAND_RADIUScos(Π/6(n-3)) - numeralWidth / 2;
同理可推
y = canvas.width / 2 +HAND_RADIUSsin(Π/6*(n-3))+ FONT_HEIGHT / 3;

注意:
这里用FONT_HEIGHT / 3我并没有搞懂含义，字高是15px，但是圆心的半径是5px，这里我并不知道为什么向下偏移5可以使数字和圆心对齐。
而且，通过计算像素来使文字对齐的方式并不好，即增大了思考量，有增加了错误机会。canvas已经提供了文字对齐属性。这里我们需要中心对齐。所以直接设置就好，如下：

context.textAlign = 'center';
context.textBaseline = 'middle';

API：
CanvasRenderingContext2D.textAlign - Web API 接口参考 | MDN (mozilla.org)
CanvasRenderingContext2D.textBaseline - Web API 接口参考 | MDN (mozilla.org)

四、表针

// 画表针
function drawHand(loc, isHour) {
    // 圆周分成60等份，因为0度是从时间3开始，所以再减90度
    let angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2;
    // 区分出时针的长度
    let handRadius = isHour ? RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION : RADIUS - HAND_TRUNCATION;
    // 画线起点
    context.moveTo(canvas.width / 2, canvas.height / 2);
    // 画线终点
    context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius, canvas.height / 2 + Math.sin(angle) * handRadius);
    context.stroke();
}

function drawHands() {
    let date = new Date();
    let hour = date.getHours();
    hour = hour > 12 ? hour - 12 : hour;
    // 乘以5是因为小时只有12，而刻度有60个
    drawHand(hour * 5 + (date.getMinutes() / 60) * 5, true);
    console.log(hour * 5 + (date.getMinutes() / 60) * 5);
    drawHand(date.getMinutes(), false);
    console.log(date.getMinutes());
    drawHand(date.getSeconds(), false)
    console.log(date.getSeconds());

}

画直线用moveTo()和lineTo()，非常简单不展开了

五、通过重绘实现运动

function drawClock(){
    context.clearRect(0,0,canvas.width,canvas.height);
    drawCircle();
    drawCenter();
    drawNumerals();
    drawHands();
}

loop = setInterval(drawClock,1000);

1、context.clearRect(x,y,w,h)可以清空，以x，y为起始坐标，宽w，高h的矩形内的内容
2、setInterval()可以不停的调用函数，直到调用clearInterval()方法
HTML DOM setInterval() 方法 (w3school.com.cn)

成品.gif

六、总结

通过基础操作绘制的时钟就完成了，可以发现，最终效果不够美观，代码风格和数学思路也与国内习惯有所差别，下一篇文章会运用更多方法，绘制一个更漂亮的时钟。