<!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. OLTP基准测试脚本

    关键语句:ll /local/sysbenchtest/sysbench-0.5/sysbench/tests/db--查看lua脚本/usr/local/mysql/bin/mysql -u roo ...

  2. SqlSever基础 union all 联合查询，简单的组合 两个查询结果拼在一起

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  3. C#多线程之二：ManualResetEvent和AutoResetEvent

    初次体验 ManualResetEvent和AutoResetEvent主要负责多线程编程中的线程同步:以下一段是引述网上和MSDN的解析: 在.Net多线程编程中,AutoResetEvent和Ma ...

  4. 【翻译】Anatomy of a Program in Memory—剖析内存中的一个程序（进程的虚拟存储器映像布局详解）

    [翻译]Anatomy of a Program in Memory—剖析内存中的一个程序(进程的虚拟存储器映像布局详解) . . .

  5. 专题：php页面跳转方法

    php只有一种方法,利用JavaScript的window.location[和window.location.href效果相同]是一种方法,利用html的meta的Refresh是一种方法. 代码 ...

  6. c# 基础之数组（包含三维数组）

    public enum ChessType { White = , None=, Black=, } class Program { static void Main(string[] args) { ...

  7. Java开发中经典的小实例-(随机数)

    import java.util.Random;//输出小于33的7个不相同的随机数public class probability {    static Random random = new R ...

  8. 6.Type and Member Basics

    1.The Different Kinds of Type Members 1.Constants:a symbol that identifies a never-changing data val ...

  9. ABAP断点调试

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  10. 最近用到这个强大的工具 PhysicsEditor （转）

    今天收到PhysicsEditor作者发过来的license key,所以顺便把PhysicsEditor也尝试了一下.主要是尝试将PhysicsEditor与cocos2dx,box2d结合开发的一 ...