<!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. HashMap底层为什么一定用数组

    HashMap源码数据结构: Entry[] table = new Entry[capacity]; 其中,Entry就是一个链表节点.如果将数组替换成LinkedList是否可行?如下: List ...

  2. composer安装thinkphp5

    之前安装过composer,里面的一些命令符可以看看,安装tp5我也是按照文档来的,也没什么难度.但是也出现一些问题: 安装tp5: 安装在本地php环境的www目录下,通过命令窗口切换到www目录下 ...

  3. Print out Android kernel log

    adb shell "su -c 'cat /proc/kmsg'" | tee kernel.log adb shell cat /proc/last_kmsg > las ...

  4. [CodePlus 2018 3 月赛] 博弈论与概率统计

    link 题意简述 小 $A$ 与小 $B$ 在玩游戏,已知小 $A$ 赢 $n$ 局,小 $B$ 赢 $m$ 局,没有平局情况,且赢加一分,输减一分,而若只有 $0$ 分仍输不扣分. 已知小 $A$ ...

  5. Docker Compose 部署 Redis 及原理讲解 | 懒人屋

    原文:Docker Compose 部署 Redis 及原理讲解 | 懒人屋 Docker Compose 部署 Redis 及原理讲解  4.4k  字    16  分钟    2019-10-1 ...

  6. 剑指offer-二叉搜索树的后序遍历序列-python

    题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 递归法: 先判断左子树是否存在 再判断右子树是否存 ...

  7. JS全选的操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. iOS app被拒整理

    作者:Leon链接:http://www.zhihu.com/question/33191327/answer/71421736来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  9. memset，内存初始化函数

    # include <string.h> void *memset(void *s, int c, unsigned long n); 函数的功能是:将指针变量 s 所指向的前 n 字节的 ...

  10. 通过关键字Event定义用户自己的事件

    Event 语句 定义用户自定义的事件. 语法[Public] Event procedurename [(arglist)] Event 语句包含下面部分: 部分 描述 Public 可选的.指定该 ...