<!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. Zend_Cache的使用

    一.Zend_Cache快速浏览 Zend_Cache 提供了一个缓存任何数据的一般方法. 在Zend Framework中缓存由前端操作,同时通过后端适配器(File, Sqlite, Memcac ...

  2. python爬取b站排行榜

    爬取b站排行榜并存到mysql中 目的 b站是我平时看得最多的一个网站,最近接到了一个爬虫的课设.首先要选择一个网站,并对其进行爬取,最后将该网站的数据存储并使其可视化. 网站的结构 目标网站:bil ...

  3. spring boot 枚举使用的坑3

    上一篇说到spring boot 使用jackson在枚举enum序列化和反序列化的问题, 再来说说在JPA中实体entity使用枚举的问题. 还是这个枚举: @Getter @AllArgsCons ...

  4. ThinkPHP视图css和js加上版本号防止缓存

    前台模块中,我的所有控制器都继承BaseController,虽然ThinkPHP中我们提供了两个配置项 'TMPL_CACHE_ON' => false,// 禁止模板编译缓存 'HTML_C ...

  5. 【问题解决方案】CentOS7替换yum的问题：使用yum makecache出现File contains no section headers

    参考链接 CentOS7替换yum的问题:使用yum时出现File contains no section headers centos安装网络repo源及错误说明 一.centos替换yum的步骤 ...

  6. k3 cloud的单据存储在业务对象表中

    k3 cloud的单据存储在业务对象表中,表名为T_META_OBJECTTYPE,查询表名和对应的表: select FNAME,FBASEOBJECTID from T_META_OBJECTTY ...

  7. IntelliJIdea初次接触

    1.下载 在官网下载专业版https://www.jetbrains.com/idea/ 2.修改配置 bin目录下文件如下: 修改idea64.exe.vmoptions(64位执行文件idea64 ...

  8. 洛谷 P2866 [USACO06NOV]糟糕的一天Bad Hair Day 牛客假日团队赛5 A (单调栈)

    链接:https://ac.nowcoder.com/acm/contest/984/A 来源:牛客网 题目描述 Some of Farmer John's N cows (1 ≤ N ≤ 80,00 ...

  9. get请求和post请求参数中文乱码的解决办法

    get请求参数中文乱码的解决办法 在tomcat的server.xml里的Connector加个URIEncoding="UTF-8",把 <Connector connec ...

  10. java 工具包

    https://www.cnblogs.com/aligege/p/8521934.html https://gitee.com/loolly/hutool https://blog.csdn.net ...