<!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. webpack打包错误 ERROR in multi ./src/main.js ./dist/bundle.js

    webpack打包错误 ERROR in multi ./src/main.js ./dist/bundle.js:https://www.jianshu.com/p/a55fb5bf75e1

  2. P1540翻译机器

    这是2010提高组第一题,是一个使用队列的模拟题(然而洛谷很多大佬用了最短路) 这道题首先要判断内存中是否已有解释(因为题目已经说了长度很小,所以可以用桶排序),没有的话便去外存找,找到后,存到内存的 ...

  3. Python yield用法浅析(stackoverflow)

    这是stackoverflow上一个关于python中yield用法的帖子,这里翻译自投票最高的一个回答,原文链接 here 问题 Python中yield关键字的用途是什么?它有什么作用?例如,我试 ...

  4. springboot2.0-统一处理返回结果和异常情况

    一.统一处理返回结果和异常处理的原因: 1.在springboot项目里我们希望接口返回的数据包含至少三个属性: a.code:请求接口的返回码,成功或者异常等返回编码,例如定义请求成功,code = ...

  5. 计算机系统结构总结_Instruction Set Architecture

    Textbook:<计算机组成与设计——硬件/软件接口>  HI<计算机体系结构——量化研究方法>          QR 这节我们来看CPU内部的一些东西. Instruct ...

  6. css厂商前缀

    在vue中写css,不要加厂商前缀,vue-cli会在打包时自动生成

  7. Docker拷贝宿主机与容器中的文件

    如果我们需要将宿主机文件拷贝到容器内可以使用 docker cp 命令,也可以将文件从容器内拷贝到宿主机 将宿主机文件拷贝到容器内 docker cp 要拷贝的宿主机文件或目录 容器名称:容器文件或目 ...

  8. 计算机编号、硬盘序列号和Mac地址查询方法

    (1)计算机编号: SN也就是Serial Number的缩写,中文也就是产品序列号,而电脑的后面一般也有一个这样的SN序列号,那么怎么查看电脑的S/N序列号呢? 方法一: 将笔记本电脑翻过来,然后在 ...

  9. CentOS7搭建FastDFS+Nginx

    1. FastDFS 介绍 FastDFS是一个开源的分布式文件系统,她对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了大容量存储和负载均衡的问题.特别适合以文件 ...

  10. 10年前文章_eclipse下perl环境搭建

    eclipse下perl环境搭建1．Eclipse下安装perl插件Help -Software Updates…- Available .- Add Site… :http://e-p-i-c ...