<!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. Hive中常用的查询命令

    日志数据的统计处理在这里反倒没有什么特别之处,就是一些 SQL 语句而已,也没有什么高深的技巧,不过还是列举一些语句示例,以示 hive 处理数据的方便之处,并展示 hive 的一些用法. a)    ...

  2. NFS服务安装及配置

    服务器环境:CentOS6.9  Linux 2.6.32-696.el6.x86_64 安装NFS服务 nfs客户端和服务端都只需要安装nfs-utils包即可,并且yum安装时会连带安装rpcbi ...

  3. PHP实现前台页面与MySQL的数据绑定、同步更新

    今天我来给大家介绍一个PHP-MySQL的小项目. 使用 PHP和前台Ajax 实现在前台对MySQL数据库中数据的增.删等操作语句功能. 如果有问题,欢迎拍砖~ 首先,我们先做好前台HTML.CSS ...

  4. 前端基于react,后端基于.net core2.0的开发之路（2） 开发环境的配置，注意事项，后端数据初始化

    前端环境配置 项目介绍文章:前端基于react,后端基于.net core2.0的开发之路(1) 介绍 1.VSCode安装 下载地址:https://code.visualstudio.com/Do ...

  5. OGEngine_2.x中BitmapFont加载后黑屏问题的解决办法

    在我使用OGEngine_2.x进行消灭圈圈(星星)游戏的实践的时候,使用BitmapFont对自定义字体进行调用. 原文字体教程如下:http://blog.csdn.net/OrangeGame/ ...

  6. springMVC+spring+MyBatis(SSM)的简单配置

    SSM(Spring+SpringMVC+MyBatis)框架集由Spring.SpringMVC.MyBatis三个开源框架整合而成,常作为数据源较简单的web项目的框架. 其中: Spring是一 ...

  7. C#版本websocket及时通信协议实现

    1:Websocket有java.nodejs.python.PHP.等版本 ,我现在使用的是C3版本,服务器端是Fleck.客户端和服务器端来使用websocket的,下面开始讲解如何使用: 2:在 ...

  8. 小随笔：利用Shader给斯坦福兔子长毛和实现雪地效果

    0x00 前言 发现最近没有了写长篇大论的激情,可能是到了冬天了吧.所以这篇小文只是简单介绍下如何在Unity中利用shader很简单的实现雪地效果以及毛皮效果,当然虽然标题写在了一起,但其实这是俩事 ...

  9. canvas图表(4) - 散点图

    原文地址:canvas图表(4) - 散点图 今天开始完成散点图,做完这一节,我的canvas图表系列就算是完成了,毕竟平时最频繁用到的就是这几类图表了:柱状,折线,饼图,散点.经过编写canvas图 ...

  10. [动态规划]P1220 关路灯

    题目描述 某一村庄在一条路线上安装了n盏路灯,每盏灯的功率有大有小(即同一段时间内消耗的电量有多有少).老张就住在这条路中间某一路灯旁,他有一项工作就是每天早上天亮时一盏一盏地关掉这些路灯. 为了给村 ...