<!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. Java动态代理 cglib

    代理模式:为某些对象提供代理以实现对这个对象的访问. 对一个对象进行访问控制的原因是为了只有在我们确实需要这个对象时才对它进行创建和初始化. 一般包括以下组件: 被代理者接口:提供被代理者的访问途径. ...

  2. C#开发COM组件

    1.每个COM组件所有对外公布的方法都必须通过接口形式实现: 2.由于.Net下编译的COM组件并等同于C编译的COM组件,所以存在必须在运行目标机器注册的情况,对此.Net下编译的COM组件必须为程 ...

  3. sql注入在线检测(sqlmapapi)

    版权:http://blog.csdn.net/yueguanghaidao/article/details/38026431 每次看都不方便   摘抄下来 之前一搞渗透的同事问我,sqlmapapi ...

  4. python_way ,自定义session

    python_way ,自定义session container = {} #可以是数据库,可以是缓存也可以是文件 class Session: def __init__(self, handler) ...

  5. STORM_0010_Message passing implementation/消息传递的实现

    下面是0.8.0之前的表述,之后的已经基于Disruptor改造过了 这个文章演示了发射和转移tuple是怎么在storm中工作的   Worker为消息传递负责 当zk中的任务出现了变化或者每个ta ...

  6. 2----lua的入门

    Lua的标识符 什么是标识符? 标识符就是你给对象,函数等取的名字 区分大小写 首字母可以使字母下划线和美元符号组成 Lua 的保留字 保留字(区分大小写) true false and or not ...

  7. Python基础学习笔记（八）常用字典内置函数和方法

    参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-dictionary.html 3. http://www.lia ...

  8. jQuery里面的普通绑定事件和on委托事件

    以click事件为例: 普通绑定事件:$('.btn1').click(function(){}绑定 on绑定事件:$(document).on('click','.btn2',function(){ ...

  9. jQuery的deferred对象

    应用场景:处理异步任务 看到一篇阮一峰老师的博客挺好的讲的就是jQuery的deferred对象.坦诚讲之前没有怎么用过这个东东呢. 摘其中几点记录下 (1) $.Deferred() 生成一个def ...

  10. java的重修之路

    一.内存管理 java里的声明分引用与基本数据类型. 数组: java里new一个对象数组为  person[] A; A = new person[4];  person[0] = new pers ...