<!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. xls数据导入sqlite数据库

      protected void btn_ok_Click(object sender, EventArgs e)     {         try         {             st ...

  2. POJ C++程序设计 编程题＃4：魔兽世界之一：备战

    编程题#4:魔兽世界之一:备战 来源: POJ(Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述 ...

  3. WWDC————苹果全球开发者大会

    WWDC:Apple Worldwide Developers Conference(苹果全球开发者)的简称,每年定期由苹果公司(Apple Inc.)在美国举办.大会主要的目的是让苹果公司向研发者们 ...

  4. mysql忘记root密码拯救方法(flush privileges)

    修改的用户都以root为列.一.拥有原来的myql的root的密码: 方法一:在mysql系统外,使用mysqladmin# mysqladmin -u root -p password " ...

  5. Laravel 5 基础（十）- 日期，Mutator 和 Scope

    在我们前面的解决方案中,直接给 published_at 赋值为当前日期实际上是一个临时解决方案,我们需要设定发布日期,可能是未来2天后才发布,让我们修改这个问题. 首先修改控制器: public f ...

  6. C++不完整的类型

    今天写C++primer 5th中文版第422页的程序时,出现了”不允许使用不完整的类型“的错误,下面我就用类A 与 类B 作为代表,重现一下该错误,并且提出解决方案. 一.带问题的类设计A: 1.类 ...

  7. pure的bug记录2

    <select id="stacked-state" style=" font-family: "Microsoft YaHei"; " ...

  8. 4.html5中超链接

    html中超链接都是通过<a>标签实现的,html5也不例外,这里就来探讨一下<a>标签. <a>元素属于文本元素,有一些私有属性或者叫局部属性.那么,相对应的还有 ...

  9. 正确打印含unicode字符的dict

    python中,dict 对象转换为类似为 \UXXXX 的格式:这种格式英文称为 code point,完全看不懂:当然,也可以通过这个网站来转换 http://rishida.net/tools/ ...

  10. Python核心编程--学习笔记--3--Python基础

    本章介绍基本的Python语法.编程风格:并简要介绍标识符.变量和关键字,以及变量占用内存的分配和回收:最后给出一个较大的Python样例程序来体验这些特性. 1 语句和语法 1.1 注释 可以在一行 ...