<!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. 关于javascript 里面类型的判断

    javacript至今共有7中类型 Six data types that are primitives: Boolean Null Undefined Number String Symbol (n ...

  2. Maven的HTTP代理设置

    http://blog.sina.com.cn/s/blog_4f925fc30102ed3y.html   第一.检测本地网络是否不能直接访问Maven的远程仓库,命令为ping repo1.mav ...

  3. mybatis动态sql中的trim标签的使用(转)

    trim标记是一个格式化的标记,可以完成set或者是where标记的功能,如下代码: 1. select * from user <trim prefix="WHERE" p ...

  4. 用Python的smtp模块发邮件的示例

    # -*- coding: UTF-8 -*- import smtplib from email.mime.multipart import MIMEMultipart from email.mim ...

  5. 了解Unix进程(2)

    1. 每个进程都有一个名字,crusher 可以得到: # process name puts $PROGRAM_NAME 10.downto(1) do | num | $PROGRAM_NAME ...

  6. 索尼MT27i Android2.3.7 线刷Android4.04

    Author:KillerLegend From:http://www.cnblogs.com/killerlegend/p/3733150.html Date:2014.5.16 工具:Window ...

  7. GUID,UUID

    <? class System { function currentTimeMillis() { list($usec, $sec) = explode(" ",microt ...

  8. SQL Server 基础之《学生表-教师表-课程表-选课表》

    一.数据库表结构及数据 建表 CREATE TABLE Student ( S# INT, Sname ), Sage INT, Ssex ) ) CREATE TABLE Course ( C# I ...

  9. async/await的实质理解

    async/await关键字能帮助开发者更容易地编写异步代码.但不少开发者对于这两个关键字的使用比较困惑,不知道该怎么使用.本文就async/await的实质作简单描述,以便大家能更清楚理解. 一.a ...

  10. Web Service 和WCF的比较

    Web Service 的工作原理 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量 ...