html5 canvas通过javascript绘制漂亮的时钟

最新推荐文章于 2021-06-21 01:03:21 发布

adiljan3336

最新推荐文章于 2021-06-21 01:03:21 发布

阅读量189

点赞数

文章标签： javascript c# xhtml ViewUI

原文链接：http://www.cnblogs.com/ButterBall/archive/2012/12/04/2801754.html

版权

小菜鸟新进博客园，发布一个时钟来纪念一下这个历史性的时刻！介于我比较喜欢那些循循善诱的教学方法，我也将遵循这种方式，一步一步讲述这个过程。让我们开始吧~

准备工作：首先新建一个空的Web应用程序，并新建一个页面

进入正题了！

1. 创建一个< canvas>

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormClock.aspx.cs" Inherits="MyClock.WebFormClock" %>
 2  <!DOCTYPE html>
 3   <html xmlns="http://www.w3.org/1999/xhtml">
 4   <head runat="server">
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 6      <title></title>
 7   </head>
 8  <body>
 9      <form id="form1" runat="server">
10      <div>
11          <canvas id="myCanvas" width="200" height="200"></canvas>
12      
13      </div>
14      </form>
15 </body>
16 </html>

上面指定了画布的尺寸，长宽各200~

2. 接下来我们将使用javascript来对上面的画布进行绘制

<body>
     <form id="form1" runat="server">
     <div>
         <canvas id="myCanvas" width="200" height="200"></canvas>
     <script type="text/javascript">
         var c = document.getElementById("myCanvas");
         var ctx = c.getContext("2d");
     </script>
     </div>
     </form>
</body>

我们现在获取了画布的对象，并建立了一个2d的绘画环境

那么一个时钟首先要有他的刻度表盘吧，所以我们现在来绘制它

3. 绘制表盘

ctx.beginPath();
        ctx.translate(100, 100);
        ctx.rotate(-Math.PI / 2);
        ctx.save();


        for (var i = 0; i < 60; i += 5) {
            ctx.fillRect(84, -3, 10, 6);
            ctx.rotate(Math.PI / 6);
        }
        ctx.closePath();

我们将画布的坐标系原点移至画布的中心，并将画布旋转-90度，然后保存这个状态！

然后使用循环语句绘制刻度盘（每画一个刻度，画板选装30度）

效果图如下：

4. 绘制指针

var slen = 60;
        var mlen = 48;
        var hlen = 35;

        var s = 0, m = 0, h = 0;

        function Refresh() {

            var time = new Date();
            s = time.getSeconds();
            m = time.getMinutes();
            h = time.getHours();

            
            //画时针
            ctx.fillStyle = '#555555';
            ctx.rotate((h + m / 60) * Math.PI / 6);
            ctx.fillRect(-8, -2, hlen, 4);
            ctx.restore();
            ctx.save();
            //画分针
            ctx.fillStyle = '#555555';
            ctx.rotate((m + s / 60) * Math.PI / 30);
            ctx.fillRect(-10, -1.5, mlen, 3);
            ctx.restore();
            ctx.save();
            //画秒针
            ctx.rotate(s * Math.PI / 30);
            ctx.fillStyle = 'Black';
            ctx.fillRect(-12, -1, slen, 2);
        }

        var MyInterval = setInterval("Refresh();", 1000);

开始的slen,mlen,hlen是我所定义的指针长度的常量

因为时钟需要每秒刷新状态，所以我们将整个情况放在一个方法内（Refresh），在最后让这个方法每秒执行一次

然后就有了这样的效果：

5. 擦除之前的笔画

html5的画布，那也是画布嘛，一个劲的往上画而不擦除以前的笔画，那肯定就会变成这样：

这真的太不科学了！所以我们对以前的内容进行清除

//以下为清除画板内容
            {
                ctx.globalCompositeOperation = "destination-out";
                ctx.strokeStyle = "rgba(250,250,250,0)";
                ctx.beginPath();
                ctx.arc(0, 0, 83, 0, 2 * Math.PI);
                ctx.closePath();
                ctx.fill();
                ctx.globalCompositeOperation = "source-over";
                ctx.restore();
                ctx.save();
            }

6. 让他变的更漂亮

仅仅上面这个样子，明显是不能满足我们对美的渴望的~那么我们现在来让秒针变得更加个性化

那么接下来，我将去除传统意义上的秒针，用扇形来表示现在的秒针

//用扇形来表示秒
            var radialgradient = ctx.createRadialGradient(0, 0, 10, 0, 0, 83);
            radialgradient.addColorStop(0.4, '#c4f2ff');
            radialgradient.addColorStop(1, "rgba(250,250,250,0)");
            ctx.fillStyle = radialgradient;
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.arc(0, 0, 82, 0, s * Math.PI / 30, false);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
            ctx.save();

这样子的话，我们就用扇形扫过的区域来表示当前的秒数了，并且在上面使用了径向渐变3

效果如下：

7.很好很好，已经基本大功告成了~

但是我想让他变得更加好玩一些，那就让当前的分钟数，来决定扇形的颜色好了~

var colorarray = ['#c4f2ff', '#dadada', '#baffe7', '#ffd7ba', '#fffdba', '#deffba', '#baffc4', '#bac9ff', '#ffbaeb', '#ffbaba'];

//用扇形来表示秒
            var radialgradient = ctx.createRadialGradient(0, 0, 10, 0, 0, 83);
            radialgradient.addColorStop(0.4, colorarray[m % 10]);
            radialgradient.addColorStop(1, "rgba(250,250,250,0)");
            ctx.fillStyle = radialgradient;
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.arc(0, 0, 82, 0, s * Math.PI / 30, false);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
            ctx.save();

我申明了一个有10种颜色的数组，然后根据现在分钟数除以10的余数来决定用哪一种~

8. 最后的完整代码

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormClock.aspx.cs" Inherits="MyClock.WebFormClock" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 8     <title></title>
 9 </head>
10 <body>
11     <form id="form1" runat="server">
12     <div>
13         <canvas id="myCanvas" width="200" height="200"></canvas>
14     <script type="text/javascript">
15         var colorarray = ['#c4f2ff', '#dadada', '#baffe7', '#ffd7ba', '#fffdba', '#deffba', '#baffc4', '#bac9ff', '#ffbaeb', '#ffbaba'];
16         var c = document.getElementById("myCanvas");
17         var ctx = c.getContext("2d");
18 
19         ctx.beginPath();
20         ctx.translate(100, 100);
21         ctx.rotate(-Math.PI / 2);
22         ctx.save();
23 
24 
25         for (var i = 0; i < 60; i += 5) {
26             ctx.fillRect(84, -3, 10, 6);
27             ctx.rotate(Math.PI / 6);
28         }
29         ctx.closePath();
30 
31         var slen = 60;
32         var mlen = 48;
33         var hlen = 35;
34 
35         var s = 0, m = 0, h = 0;
36 
37         function Refresh() {
38 
39             var time = new Date();
40             s = time.getSeconds();
41             m = time.getMinutes();
42             h = time.getHours();
43 
44             //以下为清除画板内容
45             {
46                 ctx.globalCompositeOperation = "destination-out";
47                 ctx.strokeStyle = "rgba(250,250,250,0)";
48                 ctx.beginPath();
49                 ctx.arc(0, 0, 83, 0, 2 * Math.PI);
50                 ctx.closePath();
51                 ctx.fill();
52                 ctx.globalCompositeOperation = "source-over";
53                 ctx.restore();
54                 ctx.save();
55             }
56 
57             //以下为绘画
58             //用扇形来表示秒
59             var radialgradient = ctx.createRadialGradient(0, 0, 10, 0, 0, 83);
60             radialgradient.addColorStop(0.4, colorarray[m % 10]);
61             radialgradient.addColorStop(1, "rgba(250,250,250,0)");
62             ctx.fillStyle = radialgradient;
63             ctx.beginPath();
64             ctx.moveTo(0, 0);
65             ctx.arc(0, 0, 82, 0, s * Math.PI / 30, false);
66             ctx.closePath();
67             ctx.fill();
68             ctx.restore();
69             ctx.save();
70             //画时针
71             ctx.fillStyle = '#555555';
72             ctx.rotate((h + m / 60) * Math.PI / 6);
73             ctx.fillRect(-8, -2, hlen, 4);
74             ctx.restore();
75             ctx.save();
76             //画分针
77             ctx.fillStyle = '#555555';
78             ctx.rotate((m + s / 60) * Math.PI / 30);
79             ctx.fillRect(-10, -1.5, mlen, 3);
80             ctx.restore();
81             ctx.save();
82             ////画秒针
83             //ctx.rotate(s * Math.PI / 30);
84             //ctx.fillStyle = 'Black';
85             //ctx.fillRect(-12, -1, slen, 2);
86         }
87 
88         var MyInterval = setInterval("Refresh();", 1000);
89         </script>
90     </div>
91     </form>
92 </body>
93 </html>

OK~

转载于:https://www.cnblogs.com/ButterBall/archive/2012/12/04/2801754.html

adiljan3336

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 canvas通过javascript绘制漂亮的时钟

小菜鸟新进博客园，发布一个时钟来纪念一下这个历史性的时刻！介于我比较喜欢那些循循善诱的教学方法，我也将遵循这种方式，一步一步讲述这个过程。让我们开始吧~准备工作：首先新建一个空的Web应用程序，并新建一个页面进入正题了！1. 创建一个<canvas> 1 <%@ Page Language="C#" AutoEventWireup="tr...
复制链接

扫一扫