<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title>canvas画时钟</title>

        <script>

        window.onload = function() {

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

            canvas.width = canvas.height = 400;

            canvas.style.background = "white";

            if (canvas.getContext) {

                var ext = canvas.getContext("2d");

                drawClock()

                setInterval(drawClock, 1000);

            }

            function drawClock() {

                var x = 200;

                var y = 200;

                var r = 150;

                ext.clearRect(0, 0, canvas.width, canvas.height)

                var oData = new Date();

                var hours = oData.getHours();

                var minutes = oData.getMinutes();

                var seconds = oData.getSeconds();

                var hoursValue = (-90 + hours * 30 + minutes / 2) * Math.PI / 180; //分针过了30，时针不应该正好在整点上，2分钟一度；

                var minutesValue = (-90 + minutes * 6) * Math.PI / 180;

                var secondsValue = (-90 + seconds * 6) * Math.PI / 180;

                ext.lineWidth = 2

                ext.arc(x, y, r, 0, Math.PI * 2, false);

                ext.stroke();

                //画小刻度

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

                    ext.strokeStyle = "black"

                    ext.lineWidth = 1;

                    ext.beginPath();

                    ext.moveTo(x, y);

                    ext.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false)

                    ext.closePath();

                    ext.stroke();

                }

                drawBlankCircle(10)

                    //画大刻度

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

                    ext.lineWidth = 3;

                    ext.strokeStyle = "green"

                    ext.beginPath();

                    ext.moveTo(x, y);

                    ext.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false)

                    ext.closePath();

                    ext.stroke();

                }

                drawBlankCircle(15)

                    //画空白覆盖圆;

                function drawBlankCircle(d) {

                    ext.fillStyle = "white"

                    ext.beginPath();

                    ext.arc(x, y, r - d, 0, Math.PI * 2, false);

                    ext.closePath();

                    ext.fill();

                }

                //画时针;

                ext.lineWidth = 5;

                ext.strokeStyle = "#f90"

                ext.beginPath();

                ext.moveTo(x, y);

                ext.arc(x, y, r - 60, hoursValue, hoursValue, false);

                ext.closePath();

                ext.stroke();

                //画分针;

                ext.lineWidth = 3;

                ext.strokeStyle = "red"

                ext.beginPath();

                ext.moveTo(x, y);

                ext.arc(x, y, r - 40, minutesValue, minutesValue, false);

                ext.closePath();

                ext.stroke();

                //画秒针;

                ext.lineWidth = 1;

                ext.strokeStyle = "black"

                ext.beginPath();

                ext.moveTo(x, y);

                ext.arc(x, y, r - 25, secondsValue, secondsValue, false);

                ext.closePath();

                ext.stroke();

                //画表盘中心小圆;

                ext.fillStyle = "black";

                ext.beginPath();

                ext.arc(x, y, 6, 0, Math.PI * 2, false);

                ext.closePath();

                ext.fill();

            }

        }

        </script>

    </head>

    <body >

        <canvas id="canvas">

        </canvas>

    </body>

</html>

canvas画时钟的更多相关文章

  1. canvas画时钟，重拾乐趣!

    canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...

  2. canvas 画时钟 会动呦

    //半径 var r = 130; //重置原点 ctx.save(); ctx.translate(400, 500); //使用translate重置原点 function drawClock() ...

  3. html5学习(一)--canvas画时钟

    利用空余时间学习一下html5. <!doctype html> <html> <head></head> <body> <canva ...

  4. 用canvas画时钟

    效果图在博客首页上. html: <canvas id="canvas" >Your browser does not support canvas</canva ...

  5. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  6. [JS,Canvas]日历时钟

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

  7. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

  8. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  9. 简单酷炫的Canvas数字时钟

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 我记得很早之前就看过这个DEMO,是岑安大大博客里看到的: 就是这个数字时钟,当时觉得这个创意不错,但是也没去折腾.直到昨天同事又在网上看 ...

随机推荐

  1. Facebook React完全解析

    2004年,对于前端社区来说,是里程碑式的一年.Gmail横空出世,它带来基于前端渲染的原生应用级别的体验,相对于之前的服务端渲染网页可谓提升了一个时代,触动了用户的G点.自此,前端渲染的网站成为无数 ...

  2. 理解inode

    转载:阮一峰 http://www.ruanyifeng.com/blog/2011/12/inode.html 一.inode是什么? 理解inode,要从文件储存说起. 文件储存在硬盘上,硬盘的最 ...

  3. html判断IE版本

    html判断IE版本 . <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> . <!--[if IE]> ...

  4. redis的安装过程基本配置及遇到问题的解决

    下载软件包 在centos下如果没有wget先安装 wgetyum -y install wgetwget http://download.redis.io/releases/redis-3.0.0. ...

  5. php全角字符转换为半角函数 实例代码

    PHP全角半角转换函数,把目前能找到的所有全角都列出来了一个个替换吧. 之前试过网上找的通过ASCII之类的字符替换,发现很多莫名其妙的问题.最后还是换成下面的字符替换方式了,把目前能找到的所有全角都 ...

  6. Using-jqGrid-s-search-toolbar-with-multiple-filter

    http://www.codeproject.com/Articles/58357/Using-jqGrid-s-search-toolbar-with-multiple-filter

  7. C#使用SQL存储过程完整流程

    存储过程就是固化在SQL数据库系统内部的SQL语句,这样做的好处是可以提高执行效率.提高数据库的安全性.减少网络流量.接下来就讲解如何在数据库中建立一个存储过程. 打开SQL2055数据库,展开“数据 ...

  8. win7旗舰版在安装vs2010后向sql2008添加SQL_Server_Management详解

    原文地址:http://blog.csdn.net/bruce_zeng/article/details/8202746

  9. Python学习教程(learning Python)--2.3.1 Python传参函数设计

    本节主要讨论设计传递多个参数子函数的设计方法. 在2.3节里我们讨论了如何自己设计一个带参数的子函数的设计方法,现在我们研究一下如何传递两个及以上参数的设计方法. 函数为何要带参数呢?其实原因很简单, ...

  10. JQuery中ajax跨域问题

    var url = "http://apis.juhe.cn/idcard/index?key=e0a6277420506b2816b82f7d7821976c&cardno=&qu ...