<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         #clock{

             background: aqua;

         }

     </style>

 </head>

 <body>

 <canvas id="clock" width="500" height="500"></canvas>

 <script src="main.js"></script>

 </body>

 </html>
 /**

  * Created by Administrator on 2016/10/14.

  */

 (function () {

     var clock = document.querySelector("#clock");

     var con = clock.getContext("2d");

     //清理画布

     function clearCanvas() {

         con.clearRect(0, 0, 500, 500);

     }

     // 绘制表盘

     function drawClockDial() {

         con.save();

         con.beginPath();

         con.fillStyle = "coral";

         con.arc(250, 250, 200, 0, 2 * Math.PI);

         con.fill();

         var grad = con.createLinearGradient(0, 0, 0, 140);

         grad.addColorStop(1, 'rgb(192, 80, 77)');

         grad.addColorStop(0.5, 'rgb(155, 187, 89)');

         grad.addColorStop(0, 'rgb(128, 100, 162)');

         con.lineWidth = 6;

         con.strokeStyle = grad;

         con.stroke();

         con.closePath();

         con.restore();

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

             var x = 180 * Math.sin(i * 30 * Math.PI / 180);

             var y = 180 * -Math.cos(i * 30 * Math.PI / 180);

             con.save();

             con.translate(240, 270);

             con.font = "50px 宋体";

             con.fillText(i.toString(), x, y);

             con.restore();

         }

     }

     //绘制针

     function drawHand() {

         clearCanvas();

         drawClockDial();

         var time = new Date();

         var hour = parseInt(time.getHours());

         var min = parseInt(time.getMinutes());

         var sec = parseInt(time.getSeconds());

         //时针

         con.save();

         con.lineWidth = 5;

         con.strokeStyle = "green";

         con.translate(250, 250);

         con.rotate((hour * 30 + min / 60) * Math.PI / 180);

         con.beginPath();

         con.moveTo(0, -100);

         con.lineTo(0, 0);

         con.lineCap = "round";

         con.stroke();

         con.closePath();

         con.restore();

         // 分针

         con.save();

         con.lineWidth = 5;

         con.strokeStyle = "blue";

         con.translate(250, 250);

         con.rotate((min * 6 + sec / 60) * Math.PI / 180);

         con.beginPath();

         con.moveTo(0, -130);

         con.lineTo(0, 0);

         con.lineCap = "round";

         con.stroke();

         con.closePath();

         con.restore();

         //秒针

         con.save();

         con.lineWidth = 5;

         con.strokeStyle = "red";

         con.translate(250, 250);

         con.rotate(sec * 6 * Math.PI / 180);

         con.beginPath();

         con.moveTo(0, -150);

         con.lineTo(0, 0);

         con.lineCap = "round";

         con.stroke();

         con.closePath();

         con.restore();

         //表心

         con.save();

         con.beginPath();

         con.arc(250, 250, 5, 0, 2 * Math.PI);

         con.closePath();

         con.lineWidth = 3;

         con.stroke();

         con.restore();

         requestAnimationFrame(drawHand);

     }

     function init() {

         drawHand();

     }

     init();

 })();

效果图：

canvas实现钟表的更多相关文章

  1. canvas画画板,canvas画五角星，canvas制作钟表、Konva写钟表

    制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...

  2. 基于canvas实现钟表

    原理说明 1.通过arc方法实现钟表外环: 2.通过line实现钟表时针,分针,秒针和刻度标志的绘制,基于save和restore方法旋转画布绘制不同角度的指针: 3.通过font方法实现在画布上绘制 ...

  3. 基础canvas应用-钟表绘制

    首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...

  4. Canvas基础——钟表绘制

    首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...

  5. HTML5 Canvas 画钟表

    画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...

  6. canvas 画钟表

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  7. Canvas 实现钟表

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

  8. 自定义view（二）

    这里是自定义view(二),上一篇关于自定义view的一些基本知识,比如说自定义view的步骤.会涉及到哪些函数以及如何实现自定义属性,同时实现了一个很基础的自定义控件,一个自定义的计时器,需要看的人 ...

  9. 【python】列出http://www.cnblogs.com/xiandedanteng中所有博文的标题

    代码: # 列出http://www.cnblogs.com/xiandedanteng中所有博文的标题 from bs4 import BeautifulSoup import requests u ...

随机推荐

  1. HDU4549 M斐波那契数列 矩阵快速幂+欧拉函数+欧拉定理

    M斐波那契数列 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total Sub ...

  2. Apply Root Motion

    Apply Root Motion 应用根动作: Should we control the character's position from the animation itself or fro ...

  3. mysql启动关闭

    RedHat Linux (Fedora Core/Cent OS) 1.启动:/etc/init.d/mysqld start2.停止:/etc/init.d/mysqld stop3.重启:/et ...

  4. python内置函数的归集

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明. Python内置(built-in)函数随着python解释器的运行而创建.在Pytho ...

  5. STORM_0004_windows下zookeeper的伪集群的搭建

    -----------------------------------------------------START------------------------------------------ ...

  6. 自定义NSLog宏输出

    根据编译条件,Debug时输出带行号的日志,Release时关闭日志 /* XCode LLVM XXX - Preprocessing中Debug会添加 DEBUG=1 标志 */ #ifdef D ...

  7. MyEclipse启动Tomcat服务器时老是跳到Debug调试上

    window->preferences->Myeclipse->Servers->Tomcat 然后找到你的相应的Tomcat服务器的版本, 选中然后展开其下面的子菜单会发现有 ...

  8. MVC加载下拉列表

    public ActionResult GetList() { string strSql = "select staff_id,nick_name from tbl_ac_info whe ...

  9. ZOJ-2362 Beloved Sons 最大权值匹配

    题意:国王有N个儿子,现在每个儿子结婚都能够获得一定的喜悦值,王子编号为1-N,有N个女孩的编号同样为1-N,每个王子心中都有心仪的女孩,现在问如果安排,能够使得题中给定的式子和最大. 分析:其实题目 ...

  10. CentOS的包/库的找的地方

    1. http://pkgs.org/ 在这个网站里面 搜索相应的 包名,看能不能找到. 2. http://rpm.pbone.net/ 在这个网站里面 搜索相应的 包名,看能不能找到. 3.