<!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. 解决Qt编译动态链接库could not find or load the Qt platform plugin "windows" in.问题

    最近用Qt5做了一个项目的界面,在编译成可执行文件EXE之后,运行文件,提示: This application failed to start because it could not find o ...

  2. 二叉搜索树的第 k 个结点

    题目 给定一颗二叉搜索树,请找出其中的第k小的结点,即将二叉树中所有元素从小到大排序的第 k 个结点. 解析 按中序遍历二叉搜索树就可以获得一个非递减的序列,此时第 k 个就为答案.实际上我们只需要按 ...

  3. 聊聊keep-alive组件的使用及其实现原理

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...

  4. javaScript属性

    ------------------------------------行内样式------------------------------------ *基本标签html 网页的开始标记head 网 ...

  5. 重新绘制TabControl的Tabpage标签，添加图片及关闭按钮

    1                                                    }

  6. [转载] 常用 Java 静态代码分析工具的分析与比较

    转载自http://www.oschina.net/question/129540_23043 简介: 本文首先介绍了静态代码分析的基本概念及主要技术,随后分别介绍了现有 4 种主流 Java 静态代 ...

  7. C++静态库与动态库（转）

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA0cAAAC6CAIAAADqPKGOAAAgAElEQVR4nO2dy5WrOhREFYgjcAQ9Iw

  8. Shiro SpringMVC 非maven HelloWorld

    项目用到Shiro就从网上找一些案例看看吧,结果看了很多都是maven的,没有办法就自己弄了一个.废话不多说,原理自己找开始上菜. 配置web.xml <?xml version="1 ...

  9. centos安装maven，git，mysql

    安装maven1:下载maven包:http://mirror.bit.edu.cn/apache/maven/maven-3/3.5.0/binaries/apache-maven-3.5.0-bi ...

  10. mysql 查询各数据库的占用大小

    select TABLE_SCHEMA, concat(truncate(sum(data_length)/1024/1024,2),' MB') as data_size, concat(trunc ...