效果图：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>canvas clock</title>

</head>

<body>

<canvas id="clock" width="500" height="500">您的浏览器不支持canvas标签</canvas>

<script type="text/javascript">

var canvas = document.getElementById('clock');

var clock = canvas.getContext('2d');

var r = canvas.width/2.5;  //半径

function drowClock(){

    //清除画布

    clock.clearRect(0, 0, 800, 800);

    var now = new Date();

    var secd = now.getSeconds();

    var min = now.getMinutes();

    var hour = now.getHours();

    //小时必须获取浮点类型（小时+分数转化的小时）

    //时间格式19:23:30

    //将24小时进制装换为12小时进制

    hour = hour + (min / 60);

    hour = hour > 12 ? hour - 12 : hour;

    //外圈

    clock.beginPath();

    clock.lineWidth = 10;

    clock.strokeStyle = "#d9d9d9";

    clock.arc(250, 250, 200, 0, 360, false);

    clock.stroke();

    clock.closePath();

    //刻度

    //时刻度

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

        clock.save();

        //设置时针的粗细

        clock.lineWidth = 7;

        //设置时针的颜色

        clock.strokeStyle = "#727272";

        //先设置0,0点

        clock.translate(250, 250);

        //再设置旋转角度

        clock.rotate((i * 30) * Math.PI / 180);//角度*Math.PI/180=弧度

        clock.beginPath();

        clock.moveTo(0, -170);

        clock.lineTo(0, -190);

        clock.closePath();

        clock.stroke();

        clock.restore();

    }

    //分刻度

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

        clock.save();

        //设置时针的粗细

        clock.lineWidth = 3;

        //设置时针的颜色

        clock.strokeStyle = "#727272";

        //先设置0,0点

        clock.translate(250, 250);

        //再设置旋转角度

        clock.rotate((i * 6) * Math.PI / 180);//角度*Math.PI/180=弧度

        clock.beginPath();

        clock.moveTo(0, -180);

        clock.lineTo(0, -190);

        clock.closePath();

        clock.stroke();

        clock.restore();

    }

    //时针

    clock.save();

    clock.lineWidth = 7;

    clock.strokeStyle = "#727272";

    clock.translate(250, 250);

    clock.rotate(hour * 30 * Math.PI / 180);

    clock.beginPath();

    clock.moveTo(0, -140);

    clock.lineTo(0, 30);

    clock.stroke();

    clock.closePath();

    clock.restore();

    // 文字

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

            angle = i * 30;

            // 转换为弧度制,Math.sin、Math.cos都接受弧度制单位

            angle = angle*Math.PI/180;;

            font = (i + 3 > 12)?i+3-12 : i+3;

            fontX = 245+Math.round(Math.cos(angle)*(r-45));

            fontY = 256+Math.round(Math.sin(angle)*(r-45));

            clock.font = 'bold 16px 微软雅黑';

            clock.fillText(font+'',fontX,fontY);

        }

    //分针

    clock.save();

    clock.lineWidth = 5;

    clock.strokeStyle = "#727272";

    clock.translate(250, 250);

    clock.rotate(min * 6 * Math.PI / 180);

    clock.beginPath();

    clock.moveTo(0, -160);

    clock.lineTo(0, 30);

    clock.stroke();

    clock.closePath();

    clock.restore();

    //秒针

    clock.save();

    clock.lineWidth = 3;

    clock.strokeStyle = "#727272";

    clock.translate(250, 250);

    clock.rotate(secd * 6 * Math.PI / 180);

    clock.beginPath();

    clock.moveTo(0, -170);

    clock.lineTo(0, 30);

    clock.closePath();

    clock.stroke();

    //画交叉点

    clock.beginPath();

    clock.arc(0, 0, 5, 0, 360, false);

    clock.closePath();

    clock.fillStyle = "#ebebeb";

    clock.fill();

    clock.stroke();

    clock.beginPath();

    clock.arc(0, -150, 5, 0, 360, false);

    clock.closePath();

    clock.fillStyle = "gray";

    clock.fill();

    clock.stroke();

    clock.restore();

    window.requestAnimationFrame(drowClock);

}

//使用setInternal（代码，（毫秒）时间）  让时钟动起来

drowClock();

// setInterval(drowClock, 1000);

</script>

</body>

</html>

html5、canvas绘制本地时钟的更多相关文章

  1. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  2. JavaScript+html5 canvas实现本地截图教程

    这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canva ...

  3. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  4. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  5. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  6. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  7. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  8. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  9. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

随机推荐

  1. 【Juicer】 一个高效、轻量的前端 (Javascript) 模板引擎

    引用地址:http://juicer.name/docs/docs_zh_cn.html * 一个完整的例子 HTML 代码: <script id="tpl" type=& ...

  2. mac显示任何来源

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "Microsoft YaHei"; color: #333333; ba ...

  3. React学习笔记-4-什么是生命周期

    什么是声明周期?组件本质上就是状态机,输入确定,输出一定确定.如何理解这一点?react有两个特点,第一个就是去除了所有的手动dom操作,也就是使用jsx.第二个就是组件把状态和结果一一对应起来,从而 ...

  4. centos下建立双机信任关系

    在有些情况下,我们希望在两台centos机器之间建立ssh连接的时候,可以不用输入密码.最常见的情况就是在使用脚本做数据库备份的时候.这种情况下,我们可以通过公钥/私钥来建立双机之间的信任关系. 网上 ...

  5. octave手册

    GNU OCTAVE是一种高级语言,主要用于数值计算.它提供交互式命令行窗口,用于求解线性和非线性问题并计算出数值,并可以进行其它数值实验,还可以用来作为一个批量数据处理语言 运行Ocatve: oc ...

  6. mysql 有报错　 ERROR! MySQL is not running, but lock file (/var/lock/subsys/mysql) exists

    sh-4.1# /etc/init.d/mysqld status ERROR! MySQL is not running, but lock file (/var/lock/subsys/mysql ...

  7. python import cv2 出错：cv2.x86_64-linux-gnu.so: undefined symbol

    之前写过一个python使用opencv处理图片的脚本,当时是可以使用的,现在突然发现执行时出错: ImportError: /usr/lib/python2.7/dist-packages/cv2. ...

  8. Oracle获取干净的建表DDL语句，不含其它存储、表空间、段属性

    早上一个同事资讯怎么获取到建表语句而且是不带存储那种SQL.Oracle自己提供了一个函数DBMS_METADATA.GET_DDL,但是获取到的建表语句含有存储.表空间.以及一些其他段的属性.如图: ...

  9. 利用C# Winform做Windows系统任务栏

    最近公司做一个考试系统,需要一个答题栏,要求:占用屏幕上方一部分区域,而且始终置顶,当其他窗口最大化时"答题栏"始终置前并且不遮挡最大化窗口的任何部分!就像windows任务栏一样 ...

  10. Swift 圆角设置

    故事面板中设置圆角(storyboard) Key Path layer.borderWidth(边框宽度) layer.cornerRadius(圆角弧度) layer.borderColor(边框 ...