<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Canvas Clock</title>

</head>

<body>

<div style="margin:100px 100px;">

    <canvas id="clock" height="200" width="200"></canvas>

</div>

</body>

<script>

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

    var ctx = obj.getContext('2d');

    var width = ctx.canvas.width;

    var height = ctx.canvas.height;

    var r = width / 2;

    var rem = width / 200;  //比例

    //画圆

    function drawBackground() {

        ctx.save();

        ctx.translate(r, r);

        ctx.beginPath();

        ctx.lineWidth = 10 * rem;

        //以0，0为原点，r为半径，0为起始角，2*Math.PI为结束角，顺时针画圆

        ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false);

        ctx.stroke();

        var hourNumber = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];

        ctx.font = 18 * rem + 'px Arial';

        ctx.textAlign = 'center';

        ctx.textBaseline = 'middle';

        //画出1-12的数字

        hourNumber.forEach(function (number, i) {

            var rad = 2 * Math.PI / 12 * i;

            var x = Math.cos(rad) * (r - 30 * rem);

            var y = Math.sin(rad) * (r - 30 * rem);

            ctx.fillText(number, x, y);

        });

        //画出秒针走动的60个点

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

            var rad = 2 * Math.PI / 60 * i;

            var x = Math.cos(rad) * (r - 18 * rem);

            var y = Math.sin(rad) * (r - 18 * rem);

            ctx.beginPath();

            if (i % 5 === 0) {

                ctx.fillStyle = '#000';

                ctx.arc(x, y, 2 * rem, 0, 2, 2 * Math.PI, false);

            } else {

                ctx.fillStyle = '#ccc';

                ctx.arc(x, y, 2 * rem, 0, 2, 2 * Math.PI, false);

            }

            ctx.fill();

        }

    }

    //绘制时针

    function drawHour(hour, minute) {

        ctx.save();

        ctx.beginPath();

        var rad = 2 * Math.PI / 12 * hour;

        var mrad = 2 * Math.PI / 12 / 60 * minute;

        ctx.rotate(rad + mrad);

        ctx.lineWidth = 6;

        ctx.lineCap = 'round';

        ctx.moveTo(0, 10 * rem);

        ctx.lineTo(0, -r / 2);

        ctx.stroke();

        ctx.restore();

    }

    //绘制分针

    function drawMinute(minute) {

        ctx.save();

        ctx.beginPath();

        var rad = 2 * Math.PI / 60 * minute;

        ctx.rotate(rad);

        ctx.lineWidth = 3 * rem;

        ctx.lineCap = 'round';

        ctx.moveTo(0, 10);

        ctx.lineTo(0, -r + 30 * rem);

        ctx.stroke();

        ctx.restore();

    }

    //绘制秒针

    function drawSecond(second) {

        ctx.save();

        ctx.beginPath();

        ctx.fillStyle = '#c14443';

        var rad = 2 * Math.PI / 60 * second;

        ctx.rotate(rad);

        ctx.moveTo(-2, 20 * rem);

        ctx.lineTo(2, 20 * rem);

        ctx.lineTo(1, -r + 18 * rem);

        ctx.lineTo(-1, -r + 18 * rem);

        ctx.fill();

        ctx.restore();

    }

    //画时钟上的中心白色原点

    function drawDot() {

        ctx.beginPath();

        ctx.fillStyle = '#fff';

        ctx.arc(0, 0, 3 * rem, 0, 2 * Math.PI, false);

        ctx.fill();

    }

    function draw() {

        ctx.clearRect(0, 0, width, height);

        var now = new Date();

        var hour = now.getHours();

        var minutes = now.getMinutes();

        var seconds = now.getSeconds();

        drawBackground();

        drawHour(hour, minutes);

        drawMinute(minutes);

        drawSecond(seconds);

        drawDot();

        ctx.restore();

    }

    setInterval(draw, 1000);   //每秒执行一次

</script>

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 lang="en"> <head> <meta charset="UTF-8&quo ...

  7. canvas 画钟表

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  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. url简单加密

    使用urlencode和urldecode可以对传输的字符串进行简单的加密,也可用于将汉字转换为16进制数字进行传输,每个16进制数前面都带一个% urlencode : 将中文转换为16进制数 ur ...

  2. Elasticsearch入门教程(一)：Elasticsearch及插件安装

    原文:Elasticsearch入门教程(一):Elasticsearch及插件安装 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:h ...

  3. IDEA一些有用的功能

    使用 Type Info 如果你想要更多的关于符号的信息,例如从哪里或它的类型是什么, 快速文档可以很好的帮到您,您可以按下 Ctrl+Q 来调用它,然后你会看到一个包含这些细节的弹出窗口.如果您不需 ...

  4. Vue的双向数据绑定的原理

    Vue数据双向绑定的原理就是采用数据劫持结合发布者-订阅者模式,通过object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监 ...

  5. Android 关于悬浮窗权限的问题

    正常情况下的处理: dialog.getWindow().setType(WindowManager.LayoutParams.TYPE_SYSTEM_ALERT)以及在清单文件中添加 <use ...

  6. 树莓派3b+下一些常用的命令（Debian下）

    安装Mysqlsudo apt-get install mysql-server即可 注:第一次登陆是可能出现以下错误,则按顺序输入命令即可: ERROR 1698 (28000):Access de ...

  7. Uber回馈开源的一些软件

    AresDB AresDB 是 Uber 开源的一个基于 GPU 运算的实时分析存储引擎和查询引擎.具备低查询延迟.高数据刷新率和高效内存和磁盘存储管理.AresDB 要求 CUDA Toolkit ...

  8. Verilog中的Timescale作用

    很多时候,我们拿到已有的东西理所当然的用了,其实,你真的对你所使用的东西了解吗? 再次犯下这样的错误,是因为在把代码从Altera 的CycloneV移植到Xilinx的Spartan6上,我遇到了非 ...

  9. VMware® Workstation 设置虚拟机目录和共享目录不要相同！

    在设置VMware的首选项是,工作区中的虚拟机的默认地址和共享虚拟机的位置目录不要设置成一样的. 否则创建的虚拟机打不开.

  10. 删除表A的记录时，Oracle 报错：“ORA-02292：违反完整约束条件（XXX.FKXXX）- 已找到子记录

    1.找到以”FKXXX“为外键的表A的子表,直接运行select a.constraint_name, a.table_name, b.constraint_name from user_constr ...