<!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. JavaScript数组知识

    JavaScript数组知识 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. 在 Chrome DevTools 中调试 JavaScript 入门

    第 1 步:重现错误 找到一系列可一致重现错误的操作始终是调试的第一步. 点击 Open Demo. 演示页面随即在新标签中打开. OPEN DEMO 在 Number 1 文本框中输入 5. 在 N ...

  3. 基于HttpRunner，解析swagger数据，快速生成接口测试框架

    使用HttpRunner默认生成的项目是这样的 命令:httprunner --startproject  项目名称 so,根据这个项目的目录结构,使用python解析swagger接口参数,可以快速 ...

  4. 吴恩达深度学习：python中的广播

    1.python中的广播: (1)广播是一种手段,可以让python代码执行得更快,我们来看看python实际如何执行. 下面矩阵列出了100克苹果.牛肉.鸡蛋和蛋白质中含有的碳水化合物.蛋白质和脂肪 ...

  5. JQuery高级笔记

    ## 今日内容:     1. JQuery 高级         1. 动画         2. 遍历         3. 事件绑定         4. 案例         5. 插件 ## ...

  6. 关于获取input标签属性的获取以及更改，此处用到的是readonly属性

    一开始,我使用的是Jquery框架中的$.("#input").readOnly,发现取出的值为undefined,不知道是不是jQuery中不支持获取标签属性的函数, 然后就使用 ...

  7. 在docker容器中为elasticsearch配置跨域访问

    一.在docker容器中进入elasticsearch对应的容器 docker exec -it [容器名] /bin/bash 二.安装vim编辑器 因为我们需要更改配置文件,安装过的朋友就不用安装 ...

  8. Linux--目录管理与文件管理--02

    ******Linux目录结构与目录管理******* 一.Linux目录结构: 1.目录创建规则:FHS文件系统层次化标准 指定了Linux操作系统的哪些目录是一定要具备的 2.目录的结构 树形结构 ...

  9. Jam's balance HDU - 5616 （01背包基础题）

    Jim has a balance and N weights. (1≤N≤20) The balance can only tell whether things on different side ...

  10. putty ssh常用命令小结

    打开putty 输入VPS的IP地址输入root回车输入密码回车 vps 更改文件夹所属组 cd /home/vpsuser/domains/afish.cnblogs.com/ chown -R v ...