<!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. 【Linux】vi（vim）起步学起来有些困难，一步一步温习

    以Tomcat的配置文件service.xml为例,记录.学习vi的最常用操作. > 什么是vi or vim? [nicchagil@localhost bak]$ man vi VIM() ...

  2. 解决This function or variable may be unsafe

    工程名字右键属性-->C/C++-->预处理器-->预处理器定义-->加入:_CRT_SECURE_NO_WARNINGS

  3. git版本控制器

    Git 是一个开源的分布式版本控制系统 Google用于android 源代码的管理就是Git,  它支持离线工作, 本地提交可以稍后提交到服务器上. 众多的开源项目都使用 Git  作为版本控制系统 ...

  4. 我的android学习经历26

    ViewPager的使用 ViewPager就想微信或者qq的顶部的导航栏一样,滑动可以改变到不同的View或者Fragment 使用方法: 在布局文件中定义标签: android.support.v ...

  5. Java-基础编程（螺旋矩阵&乘法表）

    package cn.rick.study; import java.io.BufferedReader;import java.io.InputStreamReader;import java.ut ...

  6. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  7. 用一张图片制作skybox图片 (如何制作360全景图、立方体)

    我转发的帖子在这里 http://dong2008hong.blog.163.com/blog/static/4696882720140294039205/ 原帖不知道地址 我这里简单整理了下 去掉了 ...

  8. SQL 语句转换格式函数Cast、Convert

    CAST和CONVERT都经常被使用.特别提取出来作为一篇文章,方便查找. CAST.CONVERT都可以执行数据类型转换.在大部分情况下,两者执行同样的功能,不同的是CONVERT还提供一些特别的日 ...

  9. Jquery基本、层次选择器

    基本选择器: $("#none").css("background","#bbffaa"); 改变id为none的所有元素的背景色 $(&q ...

  10. Mysql数据库实践操作之————批量插入数据（100万级别的数据）

    第一种方法:使用insert into 插入 从Redis每次获取100条数据,根据条件去插入到Mysql数据库中: 条件: 如果当前队列中的值大于1000条,则会自动的条用该方法,该方法每次获取从队 ...