<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #c{
            background:#ccc;
        }
    </style>
</head>
<body>
    <canvas id="c" width="400" height="400"></canvas>
</body>
</html>
<script>
    var cd=document.getElementById("c");
    var c=cd.getContext("2d");

    c.save();
        c.arc(200,200,100,0,2*Math.PI);
        c.stroke();
    c.restore();

    //绘制秒盘
    c.save();
    c.translate(200,200);
    c.beginPath();
    for(var i=0;i<60;i++){
        c.moveTo(95,0);
        c.lineTo(100,0);
        c.rotate(6*Math.PI/180);
    }
    c.closePath();
    c.stroke();
    c.restore();

    //绘制时盘

    c.save();
    c.translate(200,200);
    c.beginPath();
    for(var i=0;i<12;i++){
        c.moveTo(90,0);
        c.lineTo(100,0);
        c.rotate(30*Math.PI/180);
    }
    c.closePath();
    c.stroke();
    c.restore();

    fn();

    function fn() {

        var time, h, m, s;
        time = new Date();
        h = time.getHours();
        m = time.getMinutes();
        s = time.getSeconds();
        h = h - 12;
        //时针；
        c.save();
        c.beginPath();
        c.lineWidth = "3";
        c.lineCap = "round";
        c.moveTo(200, 200);
        c.arc(200, 200, 50, (-90 + h * 30+(m/2)) * Math.PI / 180, (-90 + h * 30+(m/2)) * Math.PI / 180);
        c.closePath();
        c.stroke();
        c.restore();

        //分针
        c.save();
        c.beginPath();
        c.lineWidth = "1";
        c.lineCap = "round";
        c.moveTo(200, 200);
        c.arc(200, 200, 62, (-90 + m * 6) * Math.PI / 180, (-90 + m * 6) * Math.PI / 180);
        c.closePath();
        c.stroke();
        c.restore();

        // 秒针

        c.save();
        c.beginPath();
        c.moveTo(200, 200);
        c.arc(200, 200, 62, (-90 + s * 6) * Math.PI / 180, (-90 + s * 6) * Math.PI / 180);
        c.closePath();
        c.stroke();
        c.restore();
    }

    var tsd=setInterval(function(){
        c.save();
        c.clearRect(130,130,140,140);
        fn();
        c.restore();
    },1000)
</script>

canvas 时钟案例的更多相关文章

  1. Coffeescript实现canvas时钟

    前言 参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意 ...

  2. 》》canvas时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 原生js之canvas时钟组件

    canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...

  4. Canvas 入门案例

    五.  Canvas 入门案例 1.  canvas 圆形绘制 <!DOCTYPE html> <html lang="en"> <head> ...

  5. 前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例

    HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内 ...

  6. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  7. Canvas - 时钟绘制

    导语:距离上一次写canvas,已经过去两年半,如今业务需要,再次拾起,随手记录. [思考] 时钟的绘制主要在于圆的绘制:1. 使用context.arc()方法直接绘制圆或圆弧: 2. 使用圆的方程 ...

  8. html5 canvas时钟

    基础知识点:                canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上 ...

  9. canvas时钟效果

    话不多说,直接上代码 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/x ...

随机推荐

  1. Eclipse连接SQL Server 2008数据库

    一.准备材料 要能够使用数据库就要有相应的JDBC,所以我们要去Microsoft官网下载 https://www.microsoft.com/zh-cn/download/details.aspx? ...

  2. win10远程桌面报出现身份验证错误，要求的函数不受支持

    win10远程桌面报出现身份验证错误,要求的函数不受支持 编写人:左丘文 2019-6-6 公司换了一台新笔记本电脑,是win10操作系统,刚想远程连接一下服务器,发现以前很正常的功能,发现不行了.网 ...

  3. c语言中不允许在函数外部给全局变量赋值

    今天,在写条件编译的时候,出现了在函数外部给全局变量赋值的情况,gcc报错,那么c语言为什么不允许在函数外部给变量赋值呢?为什么声明变量的时候可以对变量进行赋值? 出错代码: /* 2 * ===== ...

  4. python字符串 常用函数 格式化字符串 字符串替换 制表符 换行符 删除空白 国际货币格式

    # 字符串常用函数# 转大写print('bmw'.upper()) # BMW# 转小写print('BMW'.lower()) # bmw# 首字母大写print('how aae you ?'. ...

  5. git LF will be replaced by CRLF in hellogit.txt

    这个是换行符的问题 参见:https://blog.csdn.net/starry_night9280/article/details/53207928

  6. css水平垂直居中问题

    水平居中: 行内元素:text-align:center; 块级元素:magin:0 auto; 子元素设置:position:absolute;  left:50%;  transform:tran ...

  7. Zabbix--05 Grafana、percona、自动发现和自动注册

    目录 一. Grafana自定义图形 1.安装grafana 2.安装并激活zabbix插件 3.数据展示 4.自定义图形仪表盘 5.自定义图形饼图 二. percona模版监控mysql 1.安装p ...

  8. zabbix 安装中文无法显示的问题

    vi /usr/share/zabbix/include/locales.inc.php把zh_CN后面参数写true 然后去选择语言吧. 如果,去选择语言的时候,你发现还是不能选择....提示:Yo ...

  9. 安装了vs2019 编译node-sass node-gyp 找不到编译器的解决方法

    1 新建powershell脚本文件 <# This is a workaround for "node-gyp is unable to find msbuild if VS2019 ...

  10. Linux下配置静态IP地址，设置DNS和主机名

    本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29Lo ...