由于上一篇描述的原因。有图像处理的需求，于是我就开始学习 canvas 啦，和以前的一样，这一篇也是一边学一边写，敲出来的。有不正确的地方，欢迎指出。
canvas 本身的 api 描述是比较简单，但是衍生出来的东西，操作，图像处理，动画，性能，还是非常的多的。所以对于 canvas 的学习不出意外的话，将会是一个系列。这就是第一篇了。下面就开始吧

在不支持 canvas 的浏览器中，显示标签中的内容。
绘图区域 默认是 300 x 150。
canvas 中的宽高是实际的宽高，css 中的宽高会等比缩放。
在开始绘图之前需要先，获取绘图环境。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
(function() {
    document.body.innerHTML='<canvas id="canvas" width="1000" height="1000">浏览器不支持</canvas>'
    const canvas = document.querySelector('#canvas');
    if (!canvas.getContext) return;
    let context = canvas.getContext('2d');
    function time() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        let x = 200;
        let y = 200;
        let r = 150;
        
        context.lineWidth = 1;
        context.beginPath();
        Array(60).fill(0).forEach((item, index) => {
            context.moveTo(x, y);
            context.arc(x,y,r,6 * index * Math.PI / 180,6 * (index + 1) * Math.PI / 180,false);
        });
        context.closePath();
        context.stroke();
        
        context.fillStyle = '#fff';
        context.beginPath();
        context.moveTo(x, y);
        context.arc(x, y, r * 20 / 21, 0, 360 * Math.PI / 180, false);
        context.closePath();
        context.fill();

        
        context.lineWidth = 2;
        context.beginPath();
        Array(12).fill(0).forEach((item, index) => {
            context.moveTo(x, y);
            context.arc(x,y,r,30 * index * Math.PI / 180,30 * (index + 1) * Math.PI / 180,false);
        });
        context.closePath();
        context.stroke();

        context.fillStyle = '#fff';
        context.beginPath();
        context.moveTo(x, y);
        context.arc(x, y, r * 19 / 21, 0, 360 * Math.PI / 180, false);
        context.closePath();
        context.fill();

        
        var date = new Date();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        var hourValue = (-90 + hour * 30 + minute / 2 + second / 60) * Math.PI / 180;
        var minuteValue = (-90 + minute * 6 + second / 12) * Math.PI / 180;
        var secondValue = (-90 + second * 6) * Math.PI / 180;

        
        context.lineWidth = 4;
        context.beginPath();
        context.moveTo(x, y);
        context.arc(x, y, r * 8 / 21, hourValue, hourValue, false);
        context.closePath();
        context.stroke();
        
        context.lineWidth = 2;
        context.beginPath();
        context.moveTo(x, y);
        context.arc(x, y, r * 15 / 21, minuteValue, minuteValue, false);
        context.closePath();
        context.stroke();
        
        context.beginPath();
        context.moveTo(x, y);
        context.arc(x, y, r * 18 / 21, secondValue, secondValue, false);
        context.closePath();
        context.stroke();
        
        setTimeout(time, 1000);
    }
    time();
})();