<!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. mysql常用的基本命令

    一.基本命令 1.启动服务(以管理员身份进入cmd): 格式:net start 服务名称 示例:net start mysql 2.停止服务(以管理员身份进入cmd): 格式:net stop 服务 ...

  2. 3.学习Dispatcher

    3.学习Dispatcher 不管是WinForm应用程序还是WPF应用程序,实际上都是一个进程,一个进程可以包含多个线程,其中有一个是主线程,其余的是子线程. 在WPF或WinForm应用程序中,主 ...

  3. go依赖包管理工具vendor基础

    go依赖包管理工具vendor基础 vendor是go的依赖包管理工具,主要用于管理项目中使用到的一些依赖. 它将项目依赖的包,特指外部包,复制到当前工程下的vendor目录下,这样go build的 ...

  4. nginx的代理服务

    nginx的代理服务 正向代理和反向代理 正向代理服务器就是用来让局域网的客户端接入外网访问外网资源,反向代理就是让外网的客户端接入局域网中的站点以访问点中的资源 正向代理 我是一个用户,我访问不了某 ...

  5. 机器学习四 SVM

    目录 引言 SVM 线性可分SVM 线性不可分SVM Hinge Loss 非线性SVM 核函数 总结 参考文献 引言 在深度神经网终(Deep Neural Network, DNN) 大热之前, ...

  6. Codeforces 909 substr用法 思维合并线段目标最少 Py语句逆推DP vecrtor缩点删不同颜色点模拟 拓扑排序处理任务

    A str.substr(i,j) 从str[i]开始起取j个字符作为返回的字符串 /* Huyyt */ #include <bits/stdc++.h> using namespace ...

  7. 百度贴吧自动回帖的两种方式，使用requests（urllib2）和selenium两种方式回帖

    本文介绍,回复贴吧指定某楼层主的帖子的方法.在这里不介绍无限发主贴和无限回复主贴的方法,无限发主题帖会爆吧,引起别人的反感,并且很容易遭到吧主的封杀:无限回主题帖,会让整个帖子的每楼的回复充满了自己的 ...

  8. RPC框架pigeon源码分析

    Pigeon是一个分布式服务通信框架(RPC),是美团点评最基础的底层框架之一.已开源,链接:https://github.com/dianping/pigeon 从接下来三个方面来分析pigeon的 ...

  9. u-boot bl _main分析

    ldr    r0, =(CONFIG_SYS_INIT_SP_ADDR): #define CONFIG_SYS_INIT_SP_ADDR     (CONFIG_SYS_INIT_RAM_ADDR ...

  10. 枚举类enum应用以及注解@transient应用

    1.增加枚举类 public enum RightTypeEnum { AUTHORITY("访问权限") private String type; RightTypeEnum(S ...