<!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. Android IOS WebRTC 音视频开发总结（三六）-- easyRTC介绍

    本文主要介绍easyRTC,文章来自博客园RTC.Blacker,支持原创,转载请说明出处. 先看看人家官网的介绍,然后再来解释,这样您可能更容易理解: 以下部分内容属个人看法,如有异议,欢迎探讨: ...

  2. 单例模式（Winform窗体的实现）

    在我的设计模式分类当中,我选择单例模式作为我第一个要写的设计模式,其一,单例模式简单.容易理解让人接受,其二,单例模式很常用,在实际的Winform窗体应用开发中能够带来更好的客户体验. 单例模式的核 ...

  3. 【转载】UML用例图

    用例图主要用来描述“用户.需求.系统功能单元”之间的关系.它展示了一个外部用户能够观察到的系统功能模型图. [用途]:帮助开发团队以一种可视化的方式理解系统的功能需求. 用例图所包含的元素如下: 1. ...

  4. c#中winform的MVP模式的简单实现

    MVP模式是类似于MVC模式的一种设计模式,最近在做项目学习过程中遇到,弄了很久终于有一些眉目,这是学习过程中的一些笔记.MVP指的是实体对象Model.视图Viw和业务处理Presenter.MVP ...

  5. SQL服务器更改名称后

    SQL服务器更改名称后 编写人:CC阿爸 2014-6-15 在日常SQL 2005数据库的操作中,有时安装完成数据库后,再更名,造成部分SQL服务不能正常使用(在SQL2000 时,想都别想更名了) ...

  6. Asp.net MVC4 Knockoutjs BootStrap Ace NinJect Jqgrid sqlserver2008

    Asp.net MVC4 Knockoutjs  BootStrap Ace NinJect  Jqgrid sqlserver2008

  7. 《安全参考》HACKCTO-201311-11

    小编的话 “晴空一鹤排云去,便引诗情到碧宵” 11月是一个让人思绪飞扬.感慨万千的时节. 就在这时,在我们小伙伴的并肩奋战下,第十一期<安全参考>又跟大家见面了. 你还在为女朋友在购物狂欢 ...

  8. Windos中无法删除桌面IE图标的解决方法

    解决方法其实并不难,打开注册表,转到如下图的位置,详细地址在图片最下面: 需要注意的是,你需要在NameSpace中逐个查看各个项目的数据值,显示为数据值为Internet Explorer的项目即为 ...

  9. 在ASP.NET MVC中以post方式传递数组参数的示例

    最近在工作中用到了在ASP.NET MVC中以post方式传递数组参数的情况,记录下来,以供参考. 一.准备参数对象 在本例中,我会传递两个数组参数:一个字符串数组,一个自定义对象数组.这个自定义对象 ...

  10. [原创]从Oracle和Microsoft Sql Server迁移到PostgreSQL Plus Advanced Server

    一.了解PPAS的迁移方式1.在线迁移和离线迁移使用Migration Studio或Migration Toolkit直接向PPAS数据库进行对象定义和数据表中数据的迁移称为在线迁移,生成要迁移对象 ...