<!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. D - 秋实大哥与快餐店

    秋实大哥与快餐店 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit  ...

  2. Python 进阶篇

    作者:武沛齐 出处:http://www.cnblogs.com/wupeiqi/articles/5246483.html Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这 ...

  3. SQL的编写顺序和执行顺序，以及空值处理，别名处理，转义字符处理

    SQL即结构化查询语言.也就是用来从数据库中操作数据的.数据总的来说就是增删改查CRUD. 一,sql的分类,大致有四类: 1)DDL : 数据定义语言 create alter drop trunc ...

  4. vue-cli解决兼容ie的es6+api问题

    官网:https://cli.vuejs.org/zh/guide/browser-compatibility.html#usebuiltins-usage https://github.com/vu ...

  5. 转载：一种云环境下SaaS软件部署方法及装置与流程

    转载:http://www.xjishu.com/zhuanli/55/201710103925.html 本发明涉及云计算技术领域,特别是涉及一种云环境下SaaS软件部署方法及装置. 背景技术: 随 ...

  6. 配置MySQL服务器使得外网可以连接

    https://blog.csdn.net/bird3014/article/details/78481104

  7. token和sign

    前言 在app开放接口api的设计中,避免不了的就是安全性问题,因为大多数接口涉及到用户的个人信息以及一些敏感的数据,所以对这些接口需要进行身份的认证,那么这就需要用户提供一些信息,比如用户名密码等, ...

  8. Java学习01-使用maven插件tomcat搭建web maven项目

    我使用社区版的IDEA,社区版的没有tomcat插件,只能使用maven插件进行tomcat的使用了,下面进入正题 一.pom.xml配置tomcat插件 <build> <fina ...

  9. SpringMVC与Json数据交互

    简单回顾了一下SpringMVC和前端JSON数据是怎么交互的 接下来详细说一下过程 前端代码写的很简单  主要是为了试验一下JSON数据的前后台传递 前端代码给大家发出来 其实真的很简单 前端接受了 ...

  10. java一键搭建新项目（地址）

    构建地址:   https://start.spring.io 文档地址:https://www.cnblogs.com/ityouknow/p/5662753.html