首页 > web前端 > js教程 > 利用Canvas制作时钟

利用Canvas制作时钟

一个新手
发布: 2017-09-06 14:45:58
原创
1198 人浏览过

首先第一步。

1

<canvas id="myCanvas" style="border:1px red solid" width="300px"; height="300px";></canvas>

登录后复制

然后

1

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");

登录后复制

定义一个绘制时钟的函数通过计时器每秒调用一次,默认首先通过函数名调用一次然后通过计时器调用。因为如果直接一开始用计时器调用就会比实际时间慢1s

1

2

drawfun();

setInterval(drawfun,1000);

登录后复制

函数体内容:

1).每次调用前清除一次画布,所以放在第一行。

1

//清除画布ctx.clearRect(0, 0, 300, 300);

登录后复制

2).绘制时钟的外边框和圆心,很容易就不解释了。

1

2

3

4

5

6

7

//时钟框和圆心  ctx.beginPath();

ctx.arc(150,150,100,0,2*Math.PI);

ctx.stroke();

ctx.beginPath();

ctx.fillStyle="black";

ctx.arc(150,150,3,0,2*Math.PI);

ctx.fill();

登录后复制

3).绘制小时和分钟的刻度。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

//绘制时分刻度

       for(var i=0;i<60;i++){

           ctx.save();

           ctx.beginPath();           //让画布以圆心为原点

           ctx.translate(150,150);           //每秒之间的角度

           ctx.rotate(Math.PI*2/60*i);           //开始绘制刻度

           ctx.moveTo(0,-99);           //时钟刻度

           if(i%5==0){

               ctx.strokeStyle = &#39;#333&#39;;

               ctx.lineWidth = 3;

               ctx.lineTo(0,-87);

           }else {//分钟刻度

               ctx.strokeStyle = &#39;#ccc&#39;;

               ctx.lineWidth = 2;

               ctx.lineTo(0,-90);

           }

           ctx.stroke();

           ctx.closePath();

           ctx.restore();

       }

登录后复制

4).绘制小时数

1

2

3

4

5

6

7

8

9

10

11

12

13

14

//绘制小时数

       for(var i=0;i<60;i++){

            ctx.beginPath();            //获取每秒秒钟之间的弧度算出小时数的坐标

            var hudu = (2*Math.PI / 360) * 6 * i;           

            var X = 150 + Math.sin(hudu) * 80 - 3.5;           

            var Y = 150 - Math.cos(hudu) * 80 + 5; //注意此处是“-”号,因为我们要得到的Y是相对于(0,0)而言的。

            if(i%5==0){                if(i==0){

                    ctx.fillText("12",X-3,Y);

                }else{

                    ctx.fillText("" + i / 5 + "",X,Y);

                }

                ctx.stroke();

            }

       }

登录后复制

5).最后绘制时分秒指针

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

      var date = new Date();      

      var Hour = date.getHours();       //获取小时数(0-23)

var Minute = date.getMinutes();     //获取分钟数(0-59)

var Second = date.getSeconds();     //获取秒数(0-59)

//绘制秒钟       ctx.save();

ctx.beginPath();       //修改画布原点,以圆心为原点

ctx.translate(150, 150);       //指针每秒旋转度数

ctx.rotate(Math.PI * 2 / 60 * Second);

ctx.strokeStyle = &#39;red&#39;;

ctx.lineWidth = 1;

ctx.moveTo(0, 20);

ctx.lineTo(0, -70);

ctx.stroke();

ctx.closePath();

ctx.restore();       //绘制分钟      

ctx.save();

ctx.beginPath();

ctx.translate(150, 150);       //当前分钟的角度加上每秒分钟旋转的角度,如果不加分钟只会当秒钟过整分的时候才会旋转

ctx.rotate(Math.PI * 2 / 60 * Minute+Math.PI * 2 / 60/60 * Second);

ctx.strokeStyle = &#39;black&#39;;

ctx.lineWidth = 1.5;

ctx.moveTo(0, 10);

ctx.lineTo(0, -60);

ctx.stroke();

ctx.closePath();

ctx.restore();       //绘制时钟      

ctx.save();

ctx.beginPath();

ctx.translate(150, 150);       //和分钟一样。

ctx.rotate(Math.PI * 2 / 12 * Hour+Math.PI * 2 / 60/12 * Minute+Math.PI * 2 / 60/60/12 * Second);

ctx.strokeStyle = &#39;black&#39;;

ctx.lineWidth = 2.5;

ctx.moveTo(0, 8);

ctx.lineTo(0, -35);

ctx.stroke();

ctx.closePath();

ctx.restore();

登录后复制

以上是利用Canvas制作时钟的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
javascript - canvas画图
来自于 1970-01-01 08:00:00
0
0
0
html5 - canvas有时候会拿不到toDataURL数据
来自于 1970-01-01 08:00:00
0
0
0
javascript - canvas 裁剪空白区域
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板