<!DOCTYPE html >

<html>

<head>

</head>

<body>

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

您的浏览器暂时不支持canvas标签，无法看到时钟！

</canvas>

    <script type="text/javascript">

        var clock = document.getElementById("clock");

        var cxt = clock.getContext('2d');

        function drawClock() {

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

            var now = new Date();

            var sec = now.getSeconds();

            var mi = now.getMinutes();

            var hour = now.getHours();

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

            hour = hour + mi / 60;

            //画表盘

            cxt.lineWidth = 13;

            cxt.strokeStyle = "blue";

            cxt.beginPath();

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

            cxt.closePath();

            cxt.stroke();

            //刻度

            //时刻度

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

                cxt.save();

                //设置时针刻度的粗细

                cxt.lineWidth = 7;

                //设置时针刻度的颜色

                cxt.strokeStyle = "#000";

                //先设置0,0点

                cxt.translate(250, 250);

                cxt.rotate(i * 30 * Math.PI / 180); //角度*Math/180=弧度

                cxt.beginPath();

                cxt.moveTo(0, -170);

                cxt.lineTo(0, -190);

                cxt.closePath();

                cxt.stroke();

                cxt.restore();

            }

            //秒刻度

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

                cxt.save();

                cxt.lineWidth = 3;

                cxt.strokeStyle = "#000";

                cxt.translate(250, 250);

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

                cxt.beginPath();

                cxt.moveTo(0, -180);

                cxt.lineTo(0, -190);

                cxt.closePath();

                cxt.stroke();

                cxt.restore();

            }

            //时针

            cxt.save();

            cxt.lineWidth = 7;

            cxt.strokeStyle = "#000";

            cxt.translate(250, 250);

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

            cxt.beginPath();

            cxt.moveTo(0, -140);

            cxt.lineTo(0, 10);

            cxt.closePath();

            cxt.stroke();

            cxt.restore();

            //分针

            cxt.save();

            cxt.lineWidth = 5;

            cxt.strokeStyle = "#000";

            cxt.translate(250, 250);

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

            cxt.beginPath();

            cxt.moveTo(0, -160);

            cxt.lineTo(0, 15);

            cxt.closePath();

            cxt.stroke();

            cxt.restore();

            //秒针

            cxt.save();

            cxt.lineWidth = 3;

            cxt.strokeStyle = "red";

            cxt.translate(250, 250);

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

            cxt.beginPath();

            cxt.moveTo(0, -170);

            cxt.lineTo(0, 20);

            cxt.closePath();

            cxt.stroke();

            //画出时针，分针，秒针的交叉点

            cxt.beginPath();

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

            cxt.closePath();

            cxt.fillStyle = "gray";

            cxt.fill();

            cxt.stroke();

            //画出时针，分针，秒针的交叉点

            cxt.beginPath();

            cxt.arc(0, -140, 3, 0, 360, false);

            cxt.closePath();

            cxt.fillStyle = "gray";

            cxt.fill();

            cxt.stroke();

            cxt.restore();

        }

        drawClock();

        window.setInterval(drawClock, 1000);

    </script>

</body>

</html>

使用HTML5中的Canves标签制作时钟特效的更多相关文章

  1. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

  2. 检测是否支持HTML5中的Video标签

    //检测是否支持HTML5 function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTe ...

  3. 让IE8支持html5中的video标签

    这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...

  4. 认识HTML5中的新标签与新属性

    前端之HTML5,CSS3(一) HTML5中常用内容标签 header标签 header标签定义文档的页眉,基本语法:<header>content</header>. na ...

  5. html5中的容器标签和文本标签

    html5中的容器标签和文本标签 html中的容器级标签和文本级标签,css中的块级元素和行内元素是我们常常拿来比较的四个名词(行内块级暂时先不考虑). 容器标签 容器级的标签可以简单的理解为能嵌套其 ...

  6. html5-8 如何控制html5中的视频标签和音频标签

    html5-8 如何控制html5中的视频标签和音频标签 一.总结 一句话总结:找到视频或者音频的element对象,然后查手册看对应的方法或者属性就可以,里面有控制的. 1.如何控制html5中的视 ...

  7. HTML5中的语义标签兼容IE8以及更低版本的浏览器

    看某教程,说让HTML5的这些语义标签能够兼容低版本的浏览器,原文是“你可以设置css的display属性为block”.很好理解,就设置css样式为block嘛,那就直接设置咯: header, s ...

  8. HTML5中常用的标签(及标签的属性和作用)

    1.标签:<!DOCTYPE>作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html>作用:此元素可告知浏览器其自身是一个HTML文档.属性 ...

  9. ios vue2.0使用html5中的audio标签不能播放音乐

    我写了一个M端播放音乐的组件,使用html5的audio标签 然后我使用watch监测currentSong 在浏览器中看到audio渲染的如下: 单独访问渲染出来的audio中url可以播放音乐,为 ...

随机推荐

  1. 三元运算和lambda表达式

      19.三目运算,三元运算:     if else 的简写: name = 'alex' if 1 == 1 else 'SB'   ==> 等价于      if 1 == 1:     ...

  2. 汉诺塔 Hanoi Tower

    电影<猩球崛起>刚开始的时候,年轻的Caesar在玩一种很有意思的游戏,就是汉诺塔...... 汉诺塔源自一个古老的印度传说:在世界的中心贝拿勒斯的圣庙里,一块黄铜板上插着三支宝石针.印度 ...

  3. Web之CSS开发技巧: CSS @media

    CSS @media 规则非常适合于将 HTML 或 XML 文档定位为目标输出方法.目前,print 媒体的使用非常普遍,与实现单独的 “可打印版本” 相比,print 提供了更加整洁的方式来创建打 ...

  4. block 做参数

    三部分 1,定义函数 /* 传出类定义block */ //定义block typedef void (^ItemClickBlock)(NSInteger selectedIndex); //blo ...

  5. 转：内核中的内存申请:kmalloc、vmalloc、kzalloc、kcalloc、get_free_pages

    在内核模块中申请分配内存需要使用内核中的专用API:kmalloc.vmalloc.kzalloc.kcalloc.get_free_pages;当然,设备驱动程序也不例外;对于提供了MMU功能的处理 ...

  6. C++11之后，对源代码增加了UTF8和UCS4的支持（Windows内部使用Unicode，因为nt内核用的是ucs2，那是89年，utf8到了92年才发明出来）

    在C++编程中, 我们常打交道的无非是编辑器和编译器, 对编辑器起来说,我们常遇到就是乱码问题, 比如中文注释显示或是保存不了等, 解决办法就是把你的文件保存成Unicode(UTF8). 对于编译器 ...

  7. Yii创建前台和后台登录表单和通过扩展 CWebUser 增加信息到 Yii::app()->user

    我参考了这篇文章来构建项目的前台和后台的目录结构.感谢Andy的这篇文章.按照所有的步骤,您将有单独的前台和后台面板,如: http://localhost/index.php // 前台 http: ...

  8. App项目升级Xcode7&iOS9(续) - This bundle is invalid. The bundle identifier contains disallowed characters

    金田 iOS 9发布已经有2月有余,现在Xcode已经有升级到Xcode7.1,开发环境安装等一系列相关的流程,以及Xcode 7 & iOS 9升级相关的一些部分,在这里就不再多加赘述(详见 ...

  9. css和js引用图片的路径问题

    原文转自:http://www.cnblogs.com/azumia/archive/2012/06/17/2552346.html 在JS文件中书写相对路径:JS文件是指在页面中引用的外部JavaS ...

  10. jQuery 左侧滑动

    $("#slideleft button").click(function(){ var $lefty = $(this).next(); $lefty.animate({ lef ...