<!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章 显示或设置网络相关信息 1.1 ip address 与ifconfig 类似 [root@znix ~]# ip address 1: lo: <LOOPBACK,UP,LOWER_U ...

  2. Windows解决anaconda下双python版本安装TensorFlow

    首先,就是双版本anaconda的安装: 以前安装好的是python2.7版本,而TensorFlow的安装仅支持3.5版本的.但是自己本来的2.7版本又不想遗弃.所以安装双版本的: 在anacond ...

  3. display：table 表格布局

    table 布局最大的特点 1.同行等高 2.宽度自动调节   那么table-cell是不是具备这个特点呢?答案是yes,为什么呢?css中有一个有意思的规则“创建匿名表格元素”.   拿table ...

  4. 微信公众平台快速开发框架 For Core 2.0 beta –JCSoft.WX.Core 5.2.0 beta发布

    写在前面 最近比较忙,都没有好好维护博客,今天拿个半成品来交代吧. 记不清上次关于微信公众号快速开发框架(简称JCWX)的更新是什么时候了,自从更新到支持.Net Framework 4.0以后基本上 ...

  5. linux数据库备份脚本

    数据库备份1.创建个备份存储目录mkdir /root/backup/2.以下内容写到dbbackup.sh(注意,使用VIM 或者VI命令新建文件,不要在WINDOWS下新建,否则可能提示 No s ...

  6. SQLSERVER实现更改表名，更改列名，更改约束代码

    1.修改表名 格式:sp_rename tablename,newtablename ? 1 sp_rename tablename,newtablename 2.修改字段名 格式:sp_rename ...

  7. C#操作Excel知识点

    近期在使用C#操作excel,主要是读取excel模板,复制其中的模板sheet页,生成多个sheet页填充相应数据后另存到excel文件,所用到的知识点如下. 一.添加引用和命名空间 添加Micro ...

  8. [转载] Rss 与 Feed 的概念区别

    转载自http://www.chinaz.com/news/2011/0831/207961.shtml 可能很多刚刚接触博客的童鞋们,也和我一样不太了解:rss和feed概念或者说不了解rss和fe ...

  9. SSM所需的jar

    首先去找struts的. http://struts.apache.org/ 下载最新的struts 2.3.7. http://www.springsource.org/spring-framewo ...

  10. 【转】python XML 操作总结(创建、保存和删除，支持utf-8和gb2312)

    原文地址:http://hi.baidu.com/tbjmnvbagkfgike/item/6743ab10af43bb24f6625cc5 最近写程序需要用到xml操作,看了看python.org上 ...