效果图：

html 5 canvas元素 

　　Html 5的canvas元素可以用于在网页上绘制图形[即canvas的作用]。

　　canvas画布使用JavaScript在网页上绘制图形

　　其拥有绘制各种路径，矩形，圆，字符以及添加图像的方法。

　　（1）在body中创建canvas元素

<canvas id="panel" width="500" height="500" style="border:1px solid #000000"></canvas>

　　<canvas>这里可以放置提示信息，当浏览器不支持canvas元素时，这里面的信息就会显示</canvas>

　　（2）使用JavaScript绘制图形

　　绘制图形时，首先，要获得canvas元素　

var panel = document.getElementById("panel");

　　通过id寻找到canvas，所以html中虽然可以在同一个页面内拥有相同的id标签，但是当JavaScript执行到时就会出现理论上只处理第一个id标签

　　其次，创建context对象，以使用context对象绘制各种路径，矩形，圆，字符以及添加图像的方法

var cxt=c.getContext("2d");

　然后就可以使用JavaScript绘制图形了

　　准备工作，表盘一个：bg.jpg

// 定义初始化方法
      function init() { }

　　// 绘制秒针

　　function drawSecond() {}

// 绘制分针
    function drawMinute() {}

　 // 绘制时针
      function drawHour() {}

// 绘制表针
   function draw() {}

// 绘制背景,加入表盘bg.jpg
    function drawBackground() {}

// 获取string类型的当前时间
   function currTimeStr() {}

// 获取当前时间，12小时制
     function currTime() {}

关于坐标

完整代码

<!--!DocType html 表明该Html是一个Html 5文档，这是：Html中的注释方式-->

<!DocType html>

<html>

    <head>

        <title>Html 5 时钟</title>

        <script type="text/javascript">

            // JavaScript用于绘制图形了，这是script的注释形式

            var panel,cxt,img;

            var pw,ph,ox,oy;

            // 定义初始化方法

            function init() {

                //获取canvas对象

                panel = document.getElementById("panel");

                // 获得canvas的宽和高

                pw = panel.width;

                ph = panel.height;

                // 这样平面坐标：(ox,oy)就是canvas的中心坐标了

                ox = pw/2;

                oy = ph/2;

                // 检查浏览器的是否支持Html5

                // [getContext是Html 5中canvas的方法,如果浏览器支持该方法就为真]

                // 创建getContext对象，以使用其中的绘图方法

                if(panel.getContext) {

                    cxt = panel.getContext('2d');

                } else {

                    alert('对不起，你的浏览器不支持Html 5');

                }

                // 转化坐标，将(ox,oy)设置为坐标系的原点

                cxt.translate(ox,oy);

                // 创建图片对象，并1000毫秒即1秒钟调用一次draw()方法来重绘图像表针

                img = new Image();

                img.onload = function() {

                    setInterval('draw()',1000);

                }

                // 将表盘设为canvas的背景

                img.src = 'bg.jpg';

            }

            // 绘制秒针

            // save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态，然后，通过调用 restore() 来恢复以前的值。

            function drawSecond() {

                cxt.save();

                // currTime().s即为当前时间的秒钟，Math.PI即为π，弧度单位：π等于180°，2π等于360°，即一个圆周。

                // 60秒，秒针转一圈

                // currTime().s 获得现在的一分钟过了多少秒

                // (2*Math.PI)/(360) 即1°对应Math.PI/180

                // 60秒转一圈即360°，弧度2π，每秒转(Math.PI/180)*((1/60*360=6))

                // rotate(弧度)

                cxt.rotate(Math.PI/180*6*currTime().s);

                // 设置所绘制图形的颜色

                cxt.strokeStyle = "#0099FF";

                // 设置直线的宽度

                cxt.lineWidth = 2;

                // 设置线段以半圆形结束，半径为线的宽度

                cxt.lineCap = 'round';

                // 开始准备工作了，丢弃任何当前定义的路径并且开始一条新的路径

                // 如果没有可能会和之前的图形连起来，产生意想不到的图像

                cxt.beginPath();

                // 画笔的起点

                cxt.moveTo(0,0);

                // 终点，以直线方式

                cxt.lineTo(0,-150);

                // 绘制起点到终点的路径

                cxt.stroke();

                cxt.restore();

            }

            // 绘制分针

            function drawMinute() {

                cxt.save();

                // 弧度

                cxt.rotate(Math.PI/180*6*currTime().m);

                cxt.strokeStyle = "#073737";

                cxt.lineWidth = 6;

                cxt.lineCap = 'round';

                cxt.beginPath();

                cxt.moveTo(0,0);

                cxt.lineTo(0,-100);

                cxt.stroke();

                cxt.restore();

            }

            // 绘制时针

            function drawHour() {

                cxt.save();

                // 时钟转过的角度：例如9:30时针转了270°+(30/60)*30度

                cxt.rotate(Math.PI/180*currTime().h*30+Math.PI/180*currTime().m/2);

                cxt.strokeStyle = "#F6A900";

                cxt.lineWidth = 10;

                cxt.lineCap = 'round';

                cxt.beginPath();

                cxt.moveTo(0,0);

                cxt.lineTo(0,-50);

                cxt.stroke();

                cxt.restore();

            }

            // 绘制表针

            function draw() {

                cxt.clearRect(-pw/2,-ph/2,pw,ph);

                drawBackground();

                // 显示表针的时候这里可以设置他们的层叠关系

                // Hour在最底层，Z轴坐标最小，先绘制的默认在画布的最底层

                drawHour();

                drawMinute();

                drawSecond();

                // innerHTML 属性可设置或返回单元格的开始标签和结束标签之间的 HTML。

                // 设置id为time的标签[这里是span标签]的显示内容为获得系统当前时间

                document.getElementById('time').innerHTML = '当前系统时间为：'+ currTimeStr();

            }

            // 绘制背景

            function drawBackground() {

                cxt.save();

                cxt.translate(0,0);

                cxt.drawImage(img,-250,-250,500,500);

                cxt.restore();

            }

            // 获取string类型的当前时间

            function currTimeStr() {

                var d = new Date();

                var h = d.getHours();

                var m = d.getMinutes();

                var s = d.getSeconds();

                return h + ':' + m + ':' + s;

            }

            // 获取当前时间，12小时制

            function currTime() {

                var d = new Date();

                var h = d.getHours();

                var m = d.getMinutes();

                var s = d.getSeconds();

                if(h > 12) {

                    h = h - 12;

                }

                return { "h":h,"m":m,"s":s};

            }

        </script>

    </head>

    <body onload="init()">

        <span id="time"></span><br />

        </span><canvas style="border:1px solid #000000" id="panel" width="500" height="500">

            对不起，你的浏览器不支持Html 5

        </canvas>

    </body>

</html>

Html 5 版 电子时钟的更多相关文章

  1. Js电子时钟

    简单版电子时钟,需要以下几个步骤 1. 封装一个函数 返回当前的时分秒 2. 使用定时器使当前以获取到的系统时间走动,每间隔一面调用 3. 把获取到的时间放到span盒子里,添加样式 效果展示  实现 ...

  2. [TPYBoard-Micropython之会python就能做硬件 3] 制作电子时钟

    转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 一.本次实验所需器材 1.TPYboard V102板  一块 2.DS3231 ...

  3. JavaScript电子时钟+倒计时

    JavaScript时间类      获取时分秒:          getHours()          getMinutes();          getSeconds();       获取 ...

  4. JS实现电子时钟

          目前有个小项目,在首页头部导航栏里需要一个电子时钟的效果,于是我就采用如下代码实现了一个电子时钟的效果.不过不完美,第一种方式容易导致网页莫名其妙的异常,后来觉得可能是做的操作太多了,然后 ...

  5. 桌面小部件----LED电子时钟实现

    桌面控件是通过 Broadcast 的形式来进行控制的,因此每个桌面控件都对应于一个BroadcastReceiver.为了简化桌面控件的开发,Android 系统提供了一个 AppWidgetPro ...

  6. Qt - 与众不同的电子时钟

     Qt的电子时钟是个老掉牙的demo了,但是利用lcdNumber显示的样子非常老土(下图第一个显示效果),一看就知道是从qt帮助文档里摘出来的example,毫无新意. 美化一下系统时钟,抛开固有控 ...

  7. C++第15周(春)项目3 - OOP版电子词典（一）

    课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759.内有完整教学方案及资源链接 [项目3-OOP版电子词典](本程序中须要的相 ...

  8. wxWidgets+wxSmith版电子词典

    课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759,内有完整教学方案及资源链接 [项目3-OOP版电子词典](本程序须要的相关 ...

  9. 3分钟利用TurnipBit制作电子时钟

    转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 TurnipBit(www.turnipbit.com)是一个面向青少年的开发板 ...

随机推荐

  1. 不安装Oracle客户端也能使用PL/SQL

    解压缩 instantclient_12_1 到 D:\Oracle\instantclient_12_1 在文件夹内建立目录, /NETWORK/ADMIN 在该目录下,新建文件tnsnames.o ...

  2. Android 进阶自定义 ViewGroup 自定义布局

    前言 在我们的实际应用中, 经常需要用到自定义控件,比如自定义圆形头像,自定义计步器等等.但有时我们不仅需要自定义控件,举个例子,FloatingActionButton 大家都很常用,所以大家也很经 ...

  3. web翻译——插件

    很多时候,可能我们web项目中需要的只是机械式的翻译,并不需要什么利用xml或者js json等等实现逼真翻译,那样工作量太大.这时候可能你就需要这几款小工具来帮助你.当然,如果 对翻译或者你的项目外 ...

  4. Dynamic Resource – 动态资源

      Dynamic Resource – 动态资源 与Static Resource不同的是,Dynamic Resource可以在程序运行时重新评估/计算资源来生成对应的对象/值,它支持向前引用,只 ...

  5. 【BZOJ4012】[HNOI2015]开店 动态树分治+二分

    [BZOJ4012][HNOI2015]开店 Description 风见幽香有一个好朋友叫八云紫,她们经常一起看星星看月亮从诗词歌赋谈到人生哲学.最近她们灵机一动,打算在幻想乡开一家小店来做生意赚点 ...

  6. 【BZOJ3110】[Zjoi2013]K大数查询 树套树

    [BZOJ3110][Zjoi2013]K大数查询 Description 有N个位置,M个操作.操作有两种,每次操作如果是1 a b c的形式表示在第a个位置到第b个位置,每个位置加入一个数c,如果 ...

  7. Android数据格式化

    1.文件大小格式化: Log.d(TAG, Formatter.formatFileSize(this, 100)); //100 B Log.d(TAG, Formatter.formatFileS ...

  8. MySQL基于二进制日志的主从复制

    一.什么是MySQL的主从复制? MySQL可以将一个数据库设置为主库,另一个数据库设置为该主库的从库,当主库发生了变更,会同步到从库中.MySQL的主从架构,可以是星型的,也可以是线型的. 星型架构 ...

  9. quick-cocos2d-x 系列之——环境搭建(Mac版)

    quick-cocos2d-x简单介绍 何为quick-cocos2d-x? ?   简单一句话:quick-cocos2d-x是採用lua语言,通过tolua++工具对cocos2d-x进一步封装, ...

  10. ABAP 调用webservice 错误

    错误:1.soamanager 配置端口错误: 调整端口后报错: java端回复: 嗯 有问题了我待会儿看看应该是数据有问题