canvas+js时钟特效

运用js+canvas方面的知识完成一个时钟的效果图，再利用for循环实现指针的转动效果：

<!--网页文档的声明-->

<!doctype html>

<html>

<!--网页的头部-->

 <head>

  <meta charset="UTF-8">

  <!--网页三要素-->

  <meta name="Keywords" content="关键词">

  <meta name="Description" content="关键词描述">

  <title>时钟效果</title>

  <!--CSS层叠样式表   加工 修饰-->

  <style type="text/css">

    *{margin:0;padding:0;}

    body{background:url("img/2.jpg");}

    #canvas{margin:100px auto;display:block;}

  </style>

 </head>

 <!--网页的主体-->

 <body>

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

        你的浏览器需要更新了更新请前往 www.xxx.com*——*

    </canvas>

    <script type="text/javascript">

        var canvas = document.getElementById('canvas');//获取上下文

        var cxt = canvas.getContext('2d');//绘图轨迹  线  圆 矩形..

        /*圆

        cxt.beginPath();//开始

        //cxt.fillStyle = "#006633";填充颜色

        cxt.strokeStyle = "#ff00ff";

        cxt.arc(250,250,200,0,360,false);//画圆方法

        //cxt.fill();填充

        cxt.stroke();

        cxt.closePath();//结束

        */

        clock()

        function clock(){

            cxt.clearRect(0,0,500,500)

            var now = new Date();

            var sec = now.getSeconds();

            var min = now.getMinutes();

            var hour = now.getHours();

                hour = hour + min/60;

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

            //表盘

            cxt.beginPath();

            cxt.lineWidth =10;//线宽

            cxt.strokeStyle = "#00ccff";

            cxt.arc(250,250,200,0,360,false);

            cxt.stroke();

            cxt.closePath();

            //分秒刻度 60个

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

            {

                cxt.save();

                cxt.translate(250,250);

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

                cxt.lineWidth = "7";

                cxt.strokeStyle ="#fff";

                cxt.beginPath();

                cxt.moveTo(0,-180);

                cxt.lineTo(0,-190);

                cxt.stroke();

                cxt.closePath();

                cxt.restore();

            }

            //时刻度

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

            {

                cxt.save();

                cxt.translate(250,250);

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

                cxt.lineWidth = "7";

                cxt.strokeStyle ="#ff0000";

                cxt.beginPath();

                cxt.moveTo(0,-175);

                cxt.lineTo(0,-195);

                cxt.stroke();

                cxt.closePath();

                cxt.restore();

            }

            //时针

            cxt.save();//保存

            cxt.strokeStyle = "yellow"

            cxt.translate(250,250);

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

            cxt.beginPath();

            cxt.moveTo(0,-100);

            cxt.lineTo(0,20);

            cxt.stroke();

            cxt.closePath();

            cxt.restore();

            //分针

            cxt.save();//保存

            cxt.strokeStyle = "#00ff00";

            cxt.lineWidth ="7";

            cxt.translate(250,250);

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

            cxt.beginPath();

            cxt.moveTo(0,-130);

            cxt.lineTo(0,20);

            cxt.stroke();

            cxt.closePath();

            cxt.restore();

            //秒针

            cxt.save();

            cxt.strokeStyle = "red";

            cxt.lineWidth ="3";

            cxt.translate(250,250);

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

            cxt.beginPath();

            cxt.moveTo(0,-150);

            cxt.lineTo(0,20);

            cxt.stroke();

            cxt.closePath();

            cxt.beginPath();

            cxt.fillStyle ="gray";

            cxt.arc(0,0,5,0,360,false);

            cxt.fill();

            cxt.beginPath();

            cxt.strokeStyle ="red";

            cxt.arc(0,0,6,0,360,false);

            cxt.stroke();

            cxt.beginPath();

            cxt.lineWidth ="1";

            cxt.strokeStyle ="red";

            cxt.moveTo(0,-150);

            cxt.lineTo(4,-130);

            cxt.stroke();

            cxt.beginPath();

            cxt.lineWidth ="1";

            cxt.strokeStyle ="red";

            cxt.moveTo(0,-150);

            cxt.lineTo(-4,-130);

            cxt.stroke();

            cxt.restore();

        }

        setInterval(clock,1000)

        //console.log(hour+'时'+min+'分'+sec+'秒')

    </script>

 </body>

</html>

利用js+canvas实现的时钟效果图的更多相关文章

  1. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  2. js+Canvas 利用js 实现浏览器保存图片到本地

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 用canvas绘制一个时钟

    实现一个时钟的绘制和时间的显示 一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html> <html l ...

  4. canvas做的时钟，学习下

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

  5. canvas炫酷时钟

    canvas炫酷时钟 实现的功能 主要用到canvas的一些基础api 直接看效果 html: <canvas id="myCanvas" width="500&q ...

  6. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  7. 利用JS脚本通过getAttribute（）和setAttribute（）等对CSS样式进行操作

    HTML中引入CSS样式的方式有三种: 1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:<link href="css/style.css" rel=" ...

  8. JS 数据类型转换-转换函数、强制类型转换、利用js变量弱类型转换

    1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才能正确运行:对其他类型 ...

  9. 利用js制作html table分页示例(js实现分页)

    有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...

随机推荐

  1. 一机运行多个resin的配置

    对于java应用服务器,常用的一般为tomcat.jboss.resin. 一. 概述 经常会有这种情况: 1.一台服务器上,跑多个java应用 2.网站负载高,需要采用负载均衡(轮询)的方式来解决 ...

  2. Cordova是做什么的

    Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等. Cordova还提供了一组统一的JavaScript类库,以及为这 ...

  3. TestNG:org.openqa.selenium.firefox.NotConnectedException: Unable to connect

    http://blog.sina.com.cn/s/blog_68f262210102vgzj.html 今天在尝试着用TestNG写一下自动化测试用例,以前也写过,不过用的是经常封装的代码,现在完全 ...

  4. 零成本实现接口自动化测试 – Java+TestNG 测试Restful service

    接口自动化测试 – Java+TestNG 测试 Restful Web Service 关键词:基于Rest的Web服务,接口自动化测试,数据驱动测试,测试Restful Web Service, ...

  5. UTF-8 GB2321

    已知:汉字“你”UTF8编码是 0xe4bda0,GBK编码是 0xc4e3,求证. 0xe4bda0 → 2进制11100100 10111101 10100000 → UTF8 3字节111001 ...

  6. Selenium 疑问之二：如何使页面滚动条移动到指定元素element的位置处？

    在用selenium做测试时,会遇到需要操作的元素不在当前可视页面中的情况,如果是手工测试,自然很简单,手动拖拽滚动条到目标元素处即可. 那么,selenium如何实现这种情形呢?答案是需要借助Jav ...

  7. 针对android方法数64k的限制，square做出的努力。精简protobuf

    1.早期的Dalvik VM内部使用short类型变量来标识方法的id,dex限制了程序的最大方法数是65535,如果超过最大限制,无法编译,把dex.force.jumbo=true添加到proje ...

  8. php 通过PATH_SEPARATOR判断当前服务器系统类型

    PATH_SEPARATOR是php中的一个预定义常量,我们可以直接echo这个常量,在linux系统中,该常量输出":",在windows系统中,该常量输出";&quo ...

  9. [系统] 安装Ubuntu 双系统 - 失败

    因为工作原因, 所以需要装ubuntu系统. 在网络上查了一下, 一般都是使用U盘安装. 但是由于手头上既没有U盘又没有光盘,只能用硬盘安装了. 查一下, 使用wubi安装方式从硬盘安装, 非常方便. ...

  10. 如何用CSS进行开发

    翻译自:How to Develop with CSS 很多web开发人员都知道CSS,但是他们很可能认为使用CSS的应用代码就是这样的: <p> <span style=" ...