<!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. CI脚本异常退出问题定位

    背景 在CI脚本中,使用类似如下脚本进行项目编译的计时,但在执行过程中,有时会出现CI脚本(命名为ci.sh)未完全执行的情况: #!/bin/bash -e sleep_time=$1 start_ ...

  2. java 操作格子问题（线段树）

    很久之前做过线段树的问题(操作格子),时间长了之后再次接触到,发现当初理解的不是很透彻,然后代码冗长,再遇到的时候发现自己甚至不能独立地完成这个问题. 所以算法这个东西啊, 第一,是要经常练习(我个人 ...

  3. EOJ 3242 重复数

    重复数 Time limit per test: 1.0 seconds Time limit all tests: 1.0 seconds Memory limit: 256 megabytes 有 ...

  4. 大话git中的撤销操作

    下面以现实场景作为情境. 基础知识,理解git中的几个区域 本地代码已经add,未commit 修改本地工作目录中的readme.md,添加文字"第一次修改" 然后查看下状态 ➜ ...

  5. [深度学习]实现一个博弈型的AI，从五子棋开始（2）

    嗯,今天接着来搞五子棋,从五子棋开始给小伙伴们聊AI. 昨天晚上我们已经实现了一个五子棋的逻辑部分,其实讲道理,有个规则在,可以开始搞AI了,但是考虑到不够直观,我们还是顺带先把五子棋的UI也先搞出来 ...

  6. Maven中settings.xml的配置项说明精讲

    1.Maven的配置文件(Maven的安装目录/conf/settings.xml ) 和 Maven仓库下(默认的Maven仓库的是用户家目录下的.m2文件,可以另行制定)的settings.xml ...

  7. C#中抽象类和接口的区别2

    1.接口是为了满足外部调用而定义的一个功能约定, 因此反映的是事物的外部特性        抽象类是从一系列相关对象中抽象出来的概念, 因此反映的是事物的内部共性:       2. 下面分别从声明, ...

  8. linux 内存 大于 jvm xmx

    文章来源: http://www.cnblogs.com/guozp/p/7845605.html 1.虽然你jvm参数设置了-Xms6g -Xmx6g,但操作系统不并会马上分配6G的物理内存,而是确 ...

  9. 单例模式/ThreadLocal/线程内共享数据

    import java.util.Random; public class ThreadDemo3 { public static void main(String[] args) { for(int ...

  10. [树莓派(raspberry pi)] 01、在linux环境下给树莓派安装系统及入门各种资料

    1.预准备 进入帮助页面https://www.raspberrypi.org/help/,可以直接看到GET START WITH PASPBERRY PI,点击进入: 接下来会引导你检查配件是否齐 ...