<!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. 比较合并工具vimdiff的主要用法归纳

    参考:https://www.ibm.com/developerworks/cn/linux/l-vimdiff/ vimdiff主要用法归纳如下:   1.打开文件 vimdiff file1 fi ...

  2. 室内净化ThinkPHP复习

    "$_GET[id]"这个是和$_GET['id']一样的 foreach的是 name 和 item if(!empty($_GET['id'])){ $where.= &quo ...

  3. Delphi初学者应小心的六大陷阱

    Delphi初学者应小心的六大陷阱   作者:子夜编译       初学DelphiI的人,由于各种原因,对DelphiI中的许多概念不能很好的理解,并由此带来了许多的问题,或者是开发出的程序稳性不好 ...

  4. xml结构

    一.XmlHelper using System; using System.Collections.Generic; using System.Linq; using System.Web; usi ...

  5. 十天学会单片机Day0点亮LED (锁存器、三极管、继电器)

    C51常用的数据类型 数据类型 关键字 所占位数 表示数范围 无符号字符型 unsigned char 8 0~255 有符号字符型 char 8 -128~127 无符号整型 unsigned in ...

  6. 【标题】一本帮你提高Excel办公效率的VBA书

    公司工程部男同事,EXCEL能力最强的前三位,分别号称:大表哥 二表哥 三表哥 公司财务部女同事,EXCEL能力最强的前三位,分别号称:大表姐 二表姐 三表姐 想成为你们公司的“表哥”.“表姐”? 但 ...

  7. 【设计模式】策略模式 （Strategy Pattern）

    策略模式是一种很简单的基础模式,用于封装一系列算法,使客户端的访问独立于算法的实现.我们可以”井中取水”来形象的描述策略模式.“取水”是一个动作,完成这个动作的方式有很多中,可以直接用手提.可以用水车 ...

  8. java获取数据库里表的名字

    一.Java方法 // 得到当前数据库下所有的表名 public void getTableNameByCon(Connection con) { try { DatabaseMetaData met ...

  9. DB2建立不记录日志的表

    )); ,'JACK'); ,'Timo'); -----建立无日日志表 --方法一:(表存在) CREATE TABLE TB_7 LIKE TB_6 NOT LOGGED INITIALLY; - ...

  10. Oracle表结构转换SqlSERVER表结构 脚本

    在审计工作中,有时需要将Oracle的表结构修改后再SqlSERVER中创建表结构,然后将数据导入到SqlSERVER中,在修改表结构的过程中方法狠多.手工修改,最蠢的方法,或者用工具UE批量修改,还 ...