<!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. C++线性表通过结构体实现操作和结构体字符串快速排序和shell排序结合

    #include<iostream> #include<string> #define ml 10 using namespace std; typedef struct{// ...

  2. Layui数据表格的接口数据请求方式为Get

    Layui数据表格的接口数据请求方式为Get

  3. emmet语法列表

    emmet语法  来源:https://docs.emmet.io/cheat-sheet/ Child: > nav>ul>li <nav> <ul> &l ...

  4. MySQL中的索引简介

    MySQL中的SQL的常见优化策略 MySQL中的索引优化 MySQL中的索引简介 一. 索引的优点 为什么要创建索引?这是因为,创建索引可以大大提高系统的查询性能. 第一.通过创建唯一性索引,可以保 ...

  5. RabbitMQ入门教程(十三)：虚拟主机vhost与权限管理

    原文:RabbitMQ入门教程(十三):虚拟主机vhost与权限管理 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://b ...

  6. 【AST篇】教你如何编写 Eslint 插件

    前言 虽然现在已经有很多实用的 ESLint 插件了,但随着项目不断迭代发展,你可能会遇到已有 ESLint 插件不能满足现在团队开发的情况.这时候,你需要自己来创建一个 ESLint 插件. 本文我 ...

  7. windows2008R2下安装sqlserver2008R2时,点setup.exe应用程序无法打开错误代码0xc0150004

    windows2008R2下安装sqlserver2008R2时,点setup.exe应用程序无法打开错误代码0xc0150004 问题截图: 网上查的答案都是需要安装.net framework 3 ...

  8. 负载均衡实现，一个域名对应多个IP地址【转载】

    使用负载均衡实现,传统和常规做法,其他方式需要特殊处理.(dns轮询,或者自己做解析)1.一个域名设定多个dns服务或者服务器进行解析,同一个域名的每个解析都指向不同的ip地址,这样应答快的dns优先 ...

  9. 树上独立集数量 树型DP

    题目描述: 对于一棵树,独立集是指两两互不相邻的节点构成的集合.例如,图1有5个不同的独立集(1个双点集合.3个单点集合.1个空集),图2有14个不同的独立集,图3有5536个不同的独立集.  输入: ...

  10. 清北学堂北京大学吴耀轩神仙讲课day5摘要

    今天讲图论 图是啥?(白纸上的符号?) 对于一个拥有n个顶点的无向连通图,它的边数一定多于n-1条.若从中选择n-1条边,使得无向图仍然连通,则由n个顶点及这 n-1条边(弧)组成的图被称为原无向图的 ...