<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>CANVAS时钟</title>

        <style>

        div{

            margin: 0 auto;

            width:500px;

            height: 500px;

        }

            body{

                /*background: url(img/u0.jpg) no-repeat center;

                -webkit-background-size: cover;

                background-size: cover;*/

            }

            +

        </style>

    </head>

    <body>

        <div>

            <img src="img/u0.jpg" style="display: none;">

            <canvas id="canvas" width="500" height="500"></canvas>

        </div>

    </body>

    <script>

        var canvas=document.getElementById("canvas");

        var cxt=canvas.getContext("2d");

        function clock(){

            var date=new Date();

            var hour=date.getHours();

            var min=date.getMinutes();

            var sec=date.getSeconds();

            hour=hour>24?hour-12:hour;

            min=min<10?"0"+min:min;

            sec=sec<10?"0"+sec:sec;

            cxt.clearRect(0,0,canvas.width,canvas.height);

            //圆

            cxt.strokeStyle="#00ffff";

            cxt.lineWidth=1;

            cxt.beginPath();

            cxt.arc(250,250,200,0,2*Math.PI,true);

            var img=new Image();

            img.src="img/h.jpg";

            cxt.clip();

            cxt.drawImage(img,0,0,500,500);

            cxt.stroke();

            cxt.restore();

            cxt.save();

            cxt.translate(250,250);

            cxt.strokeStyle="fuchsia";

            cxt.lineWidth=7;

            //画时针

            for (var i=0;i<12;i++) {

            cxt.rotate(30*Math.PI/180);

            cxt.beginPath();

            cxt.moveTo(0,-195);

            cxt.lineTo(0,-175);

            cxt.closePath();

            cxt.stroke();

            }

            cxt.restore();

            cxt.save();

            cxt.translate(250,250);

            cxt.strokeStyle="#ffff00";

            cxt.lineWidth=5;

            //分针

            for (var i=0;i<60;i++) {

            cxt.rotate(6*Math.PI/180);

            cxt.beginPath();

            cxt.moveTo(0,-195);

            cxt.lineTo(0,-190);

            cxt.closePath();

            cxt.stroke();

            }

            //时针

            cxt.restore();

            cxt.save();

            cxt.lineWidth=7;

            cxt.strokeStyle="mediumorchid";

            cxt.translate(250,250);

            cxt.rotate(hour*30*Math.PI/180);

            cxt.beginPath();

            cxt.moveTo(0,-130);

            cxt.lineTo(0,10);

            cxt.closePath();

            cxt.stroke();

            cxt.restore();

            //分针

            cxt.save();

            cxt.lineWidth=5;

            cxt.strokeStyle="#fff00";

            cxt.translate(250,250);

            cxt.rotate(min*6*Math.PI/180);

            cxt.beginPath();

            cxt.moveTo(0,-150);

            cxt.lineTo(0,10);

            cxt.closePath();

            cxt.stroke();

            cxt.restore();

            //秒针

            cxt.save();

            cxt.lineWidth=3;

            cxt.strokeStyle="#ff0000";

            cxt.translate(250,250);

            cxt.rotate(sec*6*Math.PI/180);

            cxt.beginPath();

            cxt.moveTo(0,-170);

            cxt.lineTo(0,10);

            cxt.closePath();

            cxt.stroke();

            cxt.beginPath();

            cxt.arc(0,0,7,0,2*Math.PI,true);

            cxt.closePath();

            cxt.strokeStyle="ff0000";

            cxt.fillStyle="#ffff00";

            cxt.fill();

            cxt.stroke();

            cxt.beginPath();

            cxt.arc(0,-140,7,0,2*Math.PI,true);

            cxt.closePath();

            cxt.strokeStyle="ff0000";

            cxt.fillStyle="#ffff00";

            cxt.fill();

            cxt.stroke();

            cxt.restore();

            cxt.save();

             cxt.beginPath();

         var time = hour+":"+min+":"+sec;

         cxt.font="18px 微软雅黑";

         cxt.textAlign="center";

         cxt.fillStyle="darkorchid";

         cxt.fillText(time,250,400);

        cxt.restore();

        }

        clock();

        setInterval(clock,1000);

    </script>

</html>

》》canvas时钟的更多相关文章

  1. Coffeescript实现canvas时钟

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

  2. 原生js之canvas时钟组件

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

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

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

  4. Canvas - 时钟绘制

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

  5. html5 canvas时钟

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

  6. canvas时钟效果

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

  7. HTML5 Canvas 时钟

    1. [图片] QQ截图20120712130049.png ​2. [代码][HTML]代码 <!DOCTYPE html><html lang="en" &g ...

  8. 简单的canvas时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. canvas 时钟+自由落体

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. linux的特殊符号与正则表达式

    第1章 linux的特殊符号 1.1 通配符 * {} 1.1.1 含义 方便查找文件 通配符是用来找文件名字的. 1.1.2  * 通过find 命令找以 .sh 结尾的文件,使用*替代文件名字. ...

  2. 软硬链接、文件删除原理、linux中的三种时间、chkconfig优化

    第1章 软硬链接 1.1 硬链接 1.1.1 含义 多个文件拥有相同的inode号码 硬链接即文件的多个入口 1.1.2 作用 防止你误删除文件 1.1.3 如何创建硬链接 ln 命令,前面是源文件  ...

  3. MongoDB可视化界面配置

    环境:windows 10 64bit 1. 以管理员身份运行cmd cd E:\MongoDB\Server\3.4\bin 2. 在data文件夹中建立logs目录 3. 在logs目录下建立mo ...

  4. Android Weekly Notes Issue #283

    November 12th, 2017 Android Weekly Issue #283 本期内容包括Gradle相关的几篇,如封装繁杂依赖的技巧,通过kotlin dsl让gradle支持kotl ...

  5. CLR类型设计之方法与构造器

    无论学习那门语言都要学习函数体,C#,JAVA,PHP,都会涉及到函数体,而C#的函数体成员并不少,方法和构造器就是函数体成员之一,函数体成员还包括但不限于:方法,属性,构造器,终结器,运算符及索引器 ...

  6. 【转】用PowerDesigner制作数据库升级脚本

    [原创]用PowerDesigner制作数据库升级脚本   很多人使用PD的时候就问有没有制作自动升级脚本的功能.其实是有的. 操作原理: 1.保存原来的版本,另存为apm的文件,生成一个Archiv ...

  7. 类的特殊成员&反射&异常处理

    类的特殊成员 1.__doc__表示类的描述信息 class Foo(object): """ 描述类信息,这是用于看片的神奇 """ de ...

  8. cookie 操作（转载）

    /** * Create a cookie with the given name and value and other optional parameters. * * @example $.co ...

  9. LKD: Chapter 6 Kernel Data Structures

    这一章我们研究四种主要的数据结构: linked lists, queues, maps, binary trees. Linked Lists:(<linux/list.h>) 在lin ...

  10. vagrant扩容

    参考: https://gist.github.com/christopher-hopper/9755310 https://www.madcoder.cn/vagrant-box-resize.ht ...