①首先在HTML的body标签中添加一个canvas标签，用于绘制时钟。

<canvas id="myCanvas" width="600" height="300"></canvas>

②在JavaScript中通过getElementById函数得到Canvas对象，并创建画笔。

 var c=document.getElementById("myCanvas");

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

③定义三个变量，slen表示秒针，mlen表示分钟，hlen表示时针，并分别赋值。

 var slen=60;

 var mlen=50;

 var hlen=40;

④开始绘制图形，设置填充色，以坐标点（200,150）为圆心，半径为100，起始弧度为0，终点弧度为360，绘制一个圆形

  cxt.beginPath();

  cxt.strokeStyle="#00f";

  //绘制一个以(200,150)为圆心，100为半径，起始弧度为0，终止弧度为360的圆

  cxt.arc(200,150,100,0,2*Math.PI,true);

  cxt.stroke();

  cxt.closePath();

⑤重新开始绘制图形，将当前起始点移动到坐标点（200,150），并将当前坐标系逆时针旋转90；

cxt.beginPath();

cxt.translate(200,150);        //平移当前起始点坐标

cxt.rotate(-Math.PI/2);       //逆时针旋转90

cxt.save();                    //保存当前路径

⑥通过一个算法完成绘制时钟时刻和数字，并且在每5个刻度后将当前坐标系顺时针旋转60

 //完成绘制时针刻度和数字，并且在每5个刻度后将当前坐标系顺时针旋转60度。

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

            if(i%5==0){

                cxt.fillRect(80,0,20,5);

                cxt.fillText(""+(i/5==0?12:i/5),70,0);

            }else{

                cxt.fillRect(90,0,10,2);

            }

            cxt.rotate(Math.PI/30);

        }

        cxt.closePath();

⑦定义三个变量，ls代表当前时间的秒，lm代表当前时间的分，lh代表当前时间的小时，并为其赋初始值0

  //ls当前时间的秒，lm当前的分，lh当前的小时

        var ls= 0,lm= 0,lh=0;

⑧定义一个函数，该函数每秒执行一次，用于重新绘制时针、分针和秒针

        function Refresh(){

            cxt.restore();                           //恢复之前的状态

            cxt.save();                              //保存状态

            cxt.rotate(ls * Math.PI / 30);         //根据秒针旋转坐标

            cxt.clearRect(5, -1, slen+1, 2+2);      //清除秒针

            cxt.restore();                          //恢复之前的状态

            cxt.save();                             //保存状态

            cxt.rotate(lm * Math.PI / 30);        //根据分针旋转坐标

            cxt.clearRect(5, -1, mlen+1, 3+2);    //清除分针

            cxt.restore();cxt.save();

            cxt.rotate(lh * Math.PI / 6);         //根据时针旋转坐标

            cxt.clearRect(5, -3, hlen+1, 4+2);    //清除秒针

            var time = new Date();                //获取当前时间

            var s = ls=time.getSeconds();         //获取秒

            var m = lm=time.getMinutes();         //获取分

            var h = lh=time.getHours();           //获取小时

            cxt.restore();

            cxt.save();

            cxt.rotate(s * Math.PI / 30);       //根据秒旋转坐标

            cxt.fillRect(5, 0, slen, 2);        //绘制秒针

            cxt.restore(); cxt.save();

            cxt.rotate(m * Math.PI / 30);      //根据分旋转坐标

            cxt.fillRect(5, 0, mlen, 3);       //绘制分针

            cxt.restore(); cxt.save();

            cxt.rotate(h * Math.PI / 6);       //根据时旋转坐标

            cxt.fillRect(5, -2, hlen, 4);      //绘制时针

        }

⑨设置每秒钟刷新一次

/设置每秒刷新一次

        var MyInterval = setInterval("Refresh();", 1000);
 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <canvas id="myCanvas" width="600" height="300"></canvas>

     <script type="text/javascript">

         var c=document.getElementById("myCanvas");

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

         //定义三个变量分别是秒针，分针，时针

         var slen=60;

         var mlen=50;

         var hlen=40;

         cxt.strokeRect(0,0, c.width, c.height);

         cxt.beginPath();

         cxt.strokeStyle="#00f";

         cxt.fillStyle="#00f";

         cxt.arc(200,150,5,0,2*Math.PI,true);

         cxt.fill();

         cxt.closePath();

         cxt.beginPath();

         cxt.strokeStyle="#00f";

         //绘制一个以(200,150)为圆心，100为半径，起始弧度为0，终止弧度为360的圆

         cxt.arc(200,150,100,0,2*Math.PI,true);

         cxt.stroke();

         cxt.closePath();

         //重新绘制，将当前起始点移动到坐标点（200,150），将当前坐标系逆时针旋转90

         cxt.beginPath();

         cxt.translate(200,150);        //平移当前起始点坐标

         cxt.rotate(-Math.PI/2);       //逆时针旋转90

         cxt.save();                    //保存当前路径

         //完成绘制时针刻度和数字，并且在每5个刻度后将当前坐标系顺时针旋转60度。

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

             if(i%5==0){

                 cxt.fillRect(80,0,20,5);

                 cxt.fillText(""+(i/5==0?12:i/5),70,0);

             }else{

                 cxt.fillRect(90,0,10,2);

             }

             cxt.rotate(Math.PI/30);

         }

         cxt.closePath();

         //ls当前时间的秒，lm当前的分，lh当前的小时

         var ls= 0,lm= 0,lh=0;

         function Refresh(){

             cxt.restore();                           //恢复之前的状态

             cxt.save();                              //保存状态

             cxt.rotate(ls * Math.PI / 30);         //根据秒针旋转坐标

             cxt.clearRect(5, -1, slen+1, 2+2);      //清除秒针

             cxt.restore();                          //恢复之前的状态

             cxt.save();                             //保存状态

             cxt.rotate(lm * Math.PI / 30);        //根据分针旋转坐标

             cxt.clearRect(5, -1, mlen+1, 3+2);    //清除分针

             cxt.restore();cxt.save();

             cxt.rotate(lh * Math.PI / 6);         //根据时针旋转坐标

             cxt.clearRect(5, -3, hlen+1, 4+2);    //清除秒针

             var time = new Date();                //获取当前时间

             var s = ls=time.getSeconds();         //获取秒

             var m = lm=time.getMinutes();         //获取分

             var h = lh=time.getHours();           //获取小时

             cxt.restore();

             cxt.save();

             cxt.rotate(s * Math.PI / 30);       //根据秒旋转坐标

             cxt.fillRect(5, 0, slen, 2);        //绘制秒针

             cxt.restore(); cxt.save();

             cxt.rotate(m * Math.PI / 30);      //根据分旋转坐标

             cxt.fillRect(5, 0, mlen, 3);       //绘制分针

             cxt.restore(); cxt.save();

             cxt.rotate(h * Math.PI / 6);       //根据时旋转坐标

             cxt.fillRect(5, -2, hlen, 4);      //绘制时针

         }

         //设置每秒刷新一次

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

     </script>

     <div id="div1" style=" background:#00f;"></div>

 </body>

 </html>

Canvas绘制时钟的更多相关文章

  1. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

  2. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  3. html5 Canvas绘制时钟以及绘制运动的圆

    1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...

  4. 小任务之Canvas绘制时钟

    背景图的绘制(大圆.数字.小圆点) 掌握基础知识:圆的绘制(arc方法),关于圆的弧度的计算,数学中关于sin cos的用法 圆的弧度为2*Math.PI 12个数字分得弧度每个为2*Math.PI/ ...

  5. 用canvas绘制时钟

    用canvas做时钟其实很简单,下面是我做出的效果: 是不是还挺漂亮的? 下面上代码: html <div class="whole"> <canvas id=& ...

  6. HTML5 Canvas 绘制时钟

    网上会看到很多绘制的时钟,看代码也是云里雾里,自学了下Canvas,觉得不难,就自己做了一个. 先看一下截图: 比较简陋,但是该有的都有了,样式只加了个阴影. html代码就不贴了,就一个canvas ...

  7. 使用canvas绘制时钟 （http://heeroluo.net/Article/Detail/95）

    准备工作 在HTML中指定一个区域放置时钟: <div id="clock" style="position: relative;"></di ...

  8. canvas绘制时钟及注释及save和restore的用法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. 用canvas绘制一个简易时钟

    在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...

随机推荐

  1. T-SQL 查询XML

    我们经常在SQL Server列中存一些XML来作为配置文件或者是保存特殊信息,那么如何将其展开并查询它或将其呈现为关系数据? 其实在T-SQL 下可以很容易的实现. 示例xml <catalo ...

  2. HTTP Session、Cookie机制详解

    一.什么是http session,有什么用 HTTP协议本身是无状态的,本身并不能支持服务端保存客户端的状态信息,于是,Web Server中引入了session的概念,用来保存客户端的状态信息. ...

  3. 用css改变默认的checkbox样式

    自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...

  4. Jsoup问题---获取http协议请求失败 org.jsoup.UnsupportedMimeTypeException: Unhandled content type. Must be text/*, application/xml, or application/xhtml+xml.

    Jsoup问题---获取http协议请求失败 1.问题:用Jsoup在获取一些网站的数据时,起初获取很顺利,但是在访问某浪的数据是Jsoup报错,应该是请求头里面的请求类型(ContextType)不 ...

  5. github的使用

    1.gitbub概念 github是一个基于git的代码托管平台,付费用户可以建私人仓库,免费用户用公共仓库,但是代码公开. 2.注册账户以及创建仓库 在github官网地址:https://gith ...

  6. Ubuntu 15.1 unity在顶部面板显示系统CPU/内存/网络速度

    全部的文件:http://files.cnblogs.com/files/xiaobo-Linux/ubuntu%E6%98%BE%E7%A4%BA%E7%B3%BB%E7%BB%9F%E7%BD%9 ...

  7. Android ListView ArrayAdapter 的简单使用

    前面写了3篇关于android的文章,其中的演示程序都写在了一个工程中,当时为了方便测试就在启动页MainActivity中放了3个按钮,点击不同的按钮进入不同的示例程序页面,MainActivity ...

  8. L2-005. 集合相似度

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAzwAAAIRCAIAAAAA0S/lAAAgAElEQVR4nO3dzass133v//xPNTszDU

  9. MYSQL基础操作

    MYSQL基础操作 [TOC] 1.基本定义 1.1.关系型数据库系统 关系型数据库系统是建立在关系模型上的数据库系统 什么是关系模型呢? 1.数据结构可以规定,同类数据结构一致,就是一个二维的表格 ...

  10. Intellij IDEA调试功能使用总结

    Intellij IDEA调试功能使用总结 这段时间一直在使用Intellij IDEA, 今天把调试区工具的使用方法记录于此. 先编译好要调试的程序. 1.设置断点 选定要设置断点的代码行,在行号的 ...