html5 canvas 时钟

作者: haibao 分类: 笔记 发布时间: 2014-08-12 11:54
我从事投资时, 会观察一家公司的全貌; 而大多数投资人只盯着它的股价。——巴菲特

之前学习html5 canvas,就顺便练习写了一个时钟。如有什么不妥的地方还请提出来哈~ 共同学习!

基础知识点:

canvas标签只是图形容器,您必须使用脚本来绘制图形。

getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。——获取上下文对象。

getContext(“2d”) 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。

fillRect(l,t,w,h):默认颜色是黑色

strokeRect(l,t,w,h):带边框的方块。默认一像素黑色边框

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

beginPath():定义开始绘制路径, 它把当前的点设置为 (0,0)。 当一个画布的环境第一次创建,beginPath() 方法会被显式地调用。

closePath():结束绘制路径(将起点与终点进行连接)

arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线,到(x2,y2)为止,并且以给定的半径radius穿过(x1,y1)。

lineTo(x,y):从一点开始绘制一条直线,到(x,y)为止。

moveTo(x,y):将绘图游标移动到(x,y),不画线。

font:表示文本样式、大小及字体,用css中指定字体的格式来指定,例如”bold 10px Arial”。

textAlign:表示文本对齐方法。可能的值有”start”、”end”、”left”、”right”和”center”。建议使用”start”和”end”,不要使用“left”和“right”,因为前两者的意思更稳妥,能同时适合从左到右和从右到左

显示(阅读)的语言。

textBaseline:表示文本的基线。可能的值有“top”、“hanging”、“middle”、“alphabetic”、”ideographic”和“bottom”。

fillText(),strokeText():这两个方法都可以接收4个参数:要绘制的文本字符串、x坐标、y坐标和和可选的最大像素宽度,文本最大像素宽度(尚未得到所有浏览器的支持,最早支持他的是firefox4)

绘制圆形

arc( x,y,半径,起始弧度,结束弧度,旋转方向,fasle)

x,y:起始位置

弧度与角度的关系:弧度=角度*Math.PI/180 2*Math.PI代表360度的弧度

旋转方向:顺时针(默认:false,逆时针:true)

注意点:

1.注意canvas画图的层次关系

2.注意合理利用beginPath()和closePath()

3.由于圆心每个角度的坐标点无法准确确定,因此用arc()化弧度,从而的得到刻度浮点,然后通过closePath闭合形成路径,填充,然后在填充一个较小的圆填充白色,从而产生刻度。

4.通过fillText(),strokeText()来打上时间点。

代码如下,

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
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>html5 canvas 时钟</title>
<script>
window.onload = function(){
    var obj = document.getElementById('clock');
    var oGC = obj.getContext('2d');
 
    function drawClock(){
        var x = 200;  //指定坐标
        var y = 200;
        var r = 150;  //指定钟表半径
 
        oGC.clearRect(0,0,obj.width,obj.height); //清空画布
 
        var oDate = new Date();      //创建日期对象
        var oHours = oDate.getHours(); //获取时间
        var oMin = oDate.getMinutes();
        var oSen = oDate.getSeconds();
 
        var oHoursValue = (-90 + oHours*30 + oMin/2)*Math.PI/180; //设置时针的值
        var oMinValue = (-90 + oMin*6)*Math.PI/180;
        var oSenValue = (-90 + oSen*6)*Math.PI/180;
 
        oGC.beginPath(); //开始
 
        for(var i=0;i<60;i++){  //i为60,代表着时钟的60个小刻度
             oGC.moveTo(x,y);
             oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false); //循环从6度到12度
        }
        oGC.closePath();
        oGC.stroke();
 
        oGC.fillStyle ='white'; //覆盖住小刻度的黑色线
        oGC.beginPath();
        oGC.moveTo(x,y);
        oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);
 
        oGC.closePath(); //结束
        oGC.fill();
 
        oGC.lineWidth = 3; //设置时钟圆盘大刻度的粗细值
        oGC.beginPath();  //开始画大的时钟刻度
 
        for(i=0;i<12;i++){   //i为12,代表着时钟刻度的12大格
           	oGC.moveTo(x,y);
            oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false); //间隔为30度,弧度=角度*Math.PI/180
        }
        oGC.closePath();
        oGC.stroke();
 
        oGC.fillStyle ='white'; //覆盖住大刻度的黑色线
        oGC.beginPath();
        oGC.moveTo(x,y);
        oGC.arc(x,y,r*18/20,360*(i+1)*Math.PI/180,false);
 
        oGC.closePath();
        oGC.fill();//表盘完成 
 
        oGC.lineWidth = 5;//设置时针宽度
        oGC.beginPath();//开始绘制时针
        oGC.moveTo(x,y);
 
        oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);//设置时针大小和弧度
        oGC.closePath();
        oGC.stroke();
 
        oGC.lineWidth = 3;//设置分针宽度
        oGC.beginPath();//开始绘制分针
        oGC.moveTo(x,y);
 
        oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);//设置分针大小和弧度
        oGC.closePath();
        oGC.stroke();
 
        oGC.lineWidth = 1;//设置秒针宽度
        oGC.beginPath();//开始绘制秒针
        oGC.moveTo(x,y);
 
        oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);//设置秒针大小和弧度
        oGC.closePath();
        oGC.stroke();
    }
    setInterval(drawClock,1000);//设置定时器,让时钟运转起来
    drawClock();
};
</script>
</head>
<body>
     <canvas id="clock" width="400" height="400"></canvas>
</body>
</html>

本文地址:[html5 canvas 时钟],如没有标注转载,均为原创,转载请保留出处和链接,欢迎分享 谢谢。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>