<!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. [Bzoj1597][Usaco2008 Mar]土地购买(斜率优化)

    题目链接 因为题目说可以分组,并且是求最值,所以斜率优化应该是可以搞的,现在要想怎么排序使得相邻的数在一个组中最优. 我们按照宽$w$从小到大,高$h$从小到大排序.这时发现可以筛掉一些一定没有贡献的 ...

  2. P1507NASA食物

    这道题是一个01背包的延伸题,只要透彻理解了,就不难了. 这个题有两个T,一个是体积一个是质量,所以这时候我们必须要加一个for了,同时要优化空间(三维降二维),然后用f[j][k]来表示当体积为j, ...

  3. Luogu P5339 [TJOI2019]唱、跳、rap和篮球

    题目 设\(f_i\)表示从\((a-4i,b-4i,c-4i,d-4i)\)中选\(n-4i\)个排队的方案数. 那么我们可以容斥,答案为\(\sum\limits_{i=0}^{lim}(-1)^ ...

  4. ES6 系列之异步处理实战

    前言 我们以查找指定目录下的最大文件为例,感受从 回调函数 -> Promise -> Generator -> Async 异步处理方式的改变. API 介绍 为了实现这个功能,我 ...

  5. Javascript高级面试

    原型 异步 一.什么是单线程,和异步有什么关系 单线程:只有一个线程,同一时间只能做一件事原因:避免DOM渲染的冲突解决方案:异步 为什么js只有一个线程:避免DOM渲染冲突 浏览器需要渲染DOM J ...

  6. PY个康托展开

    卡 PY 的题,和 BIT 一样,不说了 内存还卡的挺紧的? 具体而言,刚好打完的 BIT 扒过来用用,然后打个阶乘就完事儿了 没什么好说的 Code fac=[0 for i in range(10 ...

  7. Restful,SAOP,SOA，RPC的基础理解

    什么是Restful restful是一种架构设计风格,提供了设计原则和约束条件,而不是架构.而满足这些约束条件和原则的应用程序或设计就是 RESTful架构或服务. 主要的设计原则: 资源与URI ...

  8. 解决nodejs环境下端口号被占用的方法

    假设被占用的端口号是8081 1.进入cmd命令窗口 输入netstat -ano|findstr "8081" cmd窗口给我的信息尾部有一个和端口8081对应的PID值 '51 ...

  9. Python 操作sqlite数据库及保存查询numpy类型数据（二）

    # -*- coding: utf-8 -*- ''' Created on 2019年3月6日 @author: Administrator ''' import sqlite3 import nu ...

  10. linux系统特殊权限位 suid、sgid、sticky

    linux系统特殊权限位 suid.sgid.stickysuid 使任意用户获得用文件属主相同的权限,sgid使用户获得与文件属组相同的权限(通过sgid获得的权限等同于同一用户组的权限) 表示方法 ...