使用canvas绘制时钟

使用canvas绘制时钟

首先创建画布

<canvas id="clock" width="500" height="500" style="background: transparent;">canvas>
1

然后设计画布样式

        var canvas=document.getElementById("clock");
        var cxt=canvas.getContext("2d");
        function drawClock(){
            //获取系统时间
            var date=new Date;
            var hour=date.getHours();
            var min=date.getMinutes();
            var sec=date.getSeconds();

            //清空画布
            cxt.clearRect(0,0,canvas.width,canvas.height);
            var img=new Image();
            img.src="nanchen.png";
            cxt.drawImage(img,40,40,420,420);
            //起始一条路径
            cxt.strokeStyle="#0fffff";
            cxt.lineWidth="10";
            cxt.beginPath();
            cxt.arc(250,250,200,0,Math.PI*2,false);
            cxt.stroke();
            //结束路径
            cxt.closePath();
            cxt.clip();


            //绘制时刻度
            for(var i=0;i<12;i++){
                cxt.save();
            cxt.strokeStyle="yellow";
            cxt.lineWidth="7";
            //设置原点
            cxt.translate(250,250);
            //设置旋转角度
            cxt.rotate(30*i*Math.PI/180);//隔三十度画一个时刻度
            cxt.beginPath();
            cxt.moveTo(0,-195);
            cxt.lineTo(0,-175);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();
            }



            //绘制分刻度  360/60=6
            for(var i=0;i<60;i++){
                cxt.save();
            cxt.strokeStyle="yellow";
            cxt.lineWidth="5";
            //设置原点
            cxt.translate(250,250);
            cxt.rotate(6*i*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,-195);
            cxt.lineTo(0,-185);
            cxt.stroke();
            cxt.closePath();
            //设置旋转角度

            cxt.restore();
            }
            //绘制时针
            cxt.save();
            cxt.strokeStyle="#00ffff";
            cxt.lineWidth="7";
            //设置原点
            cxt.translate(250,250);
            cxt.rotate(hour*30*Math.PI/180);//每小时旋转三十度
            cxt.beginPath();
            cxt.moveTo(0,-130);
            cxt.lineTo(0,10);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();


            //绘制分针
            cxt.save();
            cxt.strokeStyle="#ffff00";
            cxt.lineWidth="5";
            //设置原点
            cxt.translate(250,250);
            cxt.rotate(min*6*Math.PI/180);//每分钟旋转6°
            cxt.beginPath();
            cxt.moveTo(0,-150);
            cxt.lineTo(0,10);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();


            //绘制秒针
            cxt.save();
            cxt.strokeStyle="#f00";
            cxt.lineWidth="3";
            //设置原点
            cxt.translate(250,250);
            cxt.rotate(sec*6*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,-170);
            cxt.lineTo(0,10);
            cxt.stroke();
            cxt.closePath();
           // cxt.restore();


            //美化表盘  中间小圆
            cxt.beginPath();
            cxt.arc(0,0,7,0,Math.PI*2);
            cxt.fillStyle="#ffff00";
            cxt.fill();
            cxt.strokeStyle="#ff0000";
            cxt.stroke();
            cxt.closePath();


            //秒针上的小圆
            cxt.beginPath();
            cxt.arc(0,-140,7,0,Math.PI*2);
            cxt.fillStyle="#ffff00";
            cxt.fill();
            cxt.strokeStyle="#ff0000";
            cxt.stroke();
            cxt.closePath();
            cxt.restore();
        }
        drawClock();
        setInterval(drawClock,1000);
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

效果：

getContext()

getContext() 方法返回一个用于在画布上绘图的环境。

---

clearRect

clearRect清空画布

---

drawImage

HTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数有三种函数原型：

• drawImage(image, dx, dy)
• drawImage(image, dx, dy, dw, dh)
• drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

---

第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。

dx和dy是image在canvas中定位的坐标值

dw和dh是image在canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值

sx和sy是image所要绘制的起始位置

sw和sh是image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值

---

beginPath()

beginPath() 其实就是告诉画布：“我要开始画草稿了，请把之前的草稿都清除掉。”是的，beginPath()是重新开始新路径，而把之前的路径都清空掉。如果路径没有了，那么我们的stroke()和fill()就无法起作用

---

arc

arc arc方法是2D画布的一个绘制圆状态的一个方法，arc有六个参数：arc(x, y, r, sAngle, eAngle, counterclockwise);六个参数对应的意思：

x,y表示圆心坐标

r 表示圆的半径

sAngle : 表示开始绘制的角度

eAngle : 表示结束绘制的角度

counterclockwise ： 表示顺时针绘制还是逆时针，false = 顺时针，true = 逆时针，默认值是false

---

stroke()

stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

---

closePath（）

结束路径

---

clip剪切

clip()使用
Canvas中的clip()方法是裁切区可用于限制图像描绘的区域，具体的用法：

使用Canvas的绘制函数比如，rect()、arc()之类的方法选择好绘图区域
使用clip()函数将该区域（由rect()、arc()方法指定的绘图区域）设定为裁选区

---

save和restore

save():保存当前的绘图状态。
restore():恢复之前保存的绘图状态。

---

moveTo

moveTo() 方法把路径移动到画布中的指定点，不创建线条。

ineTo

ineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。