<!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. dubbo模块组织方式

    dubbo源码版本:2.5.4 阿里通过maven将dubbo的36个模块组织成了一个项目,各个模块结构如下: -------------------------------------------- ...

  2. FCKeditor使用方法技术详解

    转载自 http://www.cnblogs.com/cchyao/archive/2010/07/01/1769204.html 1.概述 FCKeditor是目前最优秀的可见即可得网页编辑器之一, ...

  3. Failed to run the WC DB work queue associated with 错误的解决

    转载自 http://blog.csdn.net/alan00000/article/details/44084455 svn checkout 代码是出现如标题的错误,提示我clean up ,cl ...

  4. NSIntger CGFloat NSNumber

    NSIntger  CGFloat  NSNumber 1.NSIntger  (long) %ld NSInteger a=; NSLog(@"----------%ld",(l ...

  5. Using GET_GROUP_SELECTION For Record Groups in Oracle Forms

    Retrieves the sequence number of the selected row for the given group. Suppose you want to get a par ...

  6. Ubuntu下手动安装VMware Tools步骤

    To mount the CD image and extract the contents: Power on the virtual machine. Log in to the virtual ...

  7. ZOJ 3785 What day is that day?(今天是星期几？)

    Description 题目描述 It's Saturday today, what day is it after 11 + 22 + 33 + ... + NN days? 今天是星期六,11 + ...

  8. Jquery动画方法 jquery.animate()

    目前在学习Oracle数据库,由于刚接触,学校让练习练习HTML内容,就想起了老师以前提起过的animate方法 animate是jquery的一个方法,这个方法主要功能是能实现比较平滑的动态效果,所 ...

  9. (二)ubuntu学习前传—uboot常见命令

    1.uboot命令类似于linux行缓冲命令行,当我们向终端命令行输入命令的时候,这些命令没有立即被系统识别,而是被缓冲到一个缓存区(也就是系统认为我换没有输入完),当我们按下回车键(换行)后,系统就 ...

  10. libevent源码安装及Linux自动编译功能总结

    这个..那个..后来发现..直接用jumbo就可以安装libevent.不过,学习一些automake的知识还是有好处的. 03机器也安装了. 这几天在阅读libevent源码,发现参考资料是基于li ...