HTML5 之Canvas 绘制时钟 Demo

<!DOCTYPE html>

<html>

<head>

    <title>Canvas 之 时钟 Demo</title>

    <!--简单 样式模版-->

    <style type="text/css">

        *

        {

            margin: 0;

            padding: 0;

            font-family: YaHei Consolas Hybrid,宋体;

            font-size: 14px;

            list-style: none;

        }

        .wrapper

        {

            margin: 50px auto;

            width: 400px;

            padding: 10px;

            border: solid 1px gray;

            background-color: #eee;

            overflow:auto;

        }/*H1浅蓝阴刻字*/

        body

        {

            background-color: gray;

        }

        h1

        {

            text-align: center;

            display: block;

            background-color: #C4DEF7;

            color: #344251;

            font: normal 30px "微软雅黑";

            text-shadow: 1px 1px 0px #DEF3FF;

            padding: 5px 0px;

            margin:10px;

            box-shadow: 0px 2px 6px #000;

            border-radius:10px;

        }

        input[type='button'],input[type='submit'] { padding:2px 5px;}

        #clockMap { background-color:White;}

        </style>

</head>

<body>

    <h1>

        Canvas 之 时钟 Demo

    </h1>

    <div class="wrapper">

        <canvas width="400" height="400" id="clockMap"></canvas>

        <script type="text/javascript">

            //获取画面DOM对象

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

            //获取2D画布的上下文

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

            //格式化时间格式为00:00:00来显示

            var formatTime = function (time) {

                return time < 10 ? "0" + time : time;

            }

            //注意：在画时分秒的针时，一定要先保存环境，画完再回到环境中，不能一次画三针

            var drawClock = function () {

                //清屏

                map.clearRect(0, 0, 400, 400);

                //保存当前环境

                map.save();

                //绘制表盘

                map.beginPath();

                map.lineWidth = 10;

                map.storkeStyle = "black";

                map.arc(200, 200, 150, 0, 360, true);

                map.stroke();

                map.closePath();

                //绘制刻度

                map.translate(200, 200);

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

                    if (i % 5 == 0) {

                        map.beginPath();

                        map.lineWidth = 4;

                        map.strokeStyle = "red";

                        map.moveTo(135, 0);

                        map.lineTo(143, 0);

                        map.stroke();

                        map.closePath();

                    }

                    else {

                        map.beginPath();

                        map.lineWidth = 2;

                        map.strokeStyle = "black";

                        map.moveTo(140, 0);

                        map.lineTo(143, 0);

                        map.stroke();

                        map.closePath();

                    }

                    map.rotate(6 * Math.PI / 180);

                }

                //绘制数字

                map.textAlign = "center";

                map.textBaseline = "middle";

                map.font = "bold 30px Arial";

                map.fillText("3", 115, 0);

                map.fillText("6", 0, 115);

                map.fillText("9", -115, 0);

                map.fillText("12", 0, -115);

                //========绘制时针，分针，秒针========

                //获取当前时间

                var date = new Date();

                var hours = date.getHours();

                var minute = date.getMinutes();

                var seconds = date.getSeconds();

                hours = hours > 12 ? hours - 12 : hours;

                var hour = hours + minute / 60;

                //绘制时针

                map.save();

                map.beginPath();

                map.rotate((hour * 30 - 90) * Math.PI / 180);

                map.lineWidth = 6;

                map.moveTo(-10, 0);

                map.lineTo(90, 0);

                map.closePath();

                map.stroke();

                map.restore();

                //绘制分针

                map.save();

                map.beginPath();

                map.rotate((minute * 6 - 90) * Math.PI / 180);

                map.lineWidth = 4;

                map.moveTo(-10, 0);

                map.lineTo(132, 0);

                map.closePath();

                map.stroke();

                map.restore();

                //绘制秒针

                map.save();

                map.beginPath();

                map.rotate((seconds * 6 - 90) * Math.PI / 180);

                map.lineWidth = 2;

                map.strokeStyle = "red";

                map.moveTo(-10, 0);

                map.lineTo(138, 0);

                map.closePath();

                map.stroke();

                map.restore();

                //中心点

                map.save();

                map.beginPath();

                map.arc(0, 0, 4, 0, 360, true);

                map.closePath();

                map.lineWidth = 2;

                map.strokeStyle = "red";

                map.fill();

                map.stroke();

                map.restore();

                //时间显示

                map.save();

                map.font = "24px Arial";

                map.fillText("当前时间："+formatTime(hours) + ":" + formatTime(minute) + ":" + formatTime(seconds), -1, -180);

                map.restore();

                //将画好的时钟显示在之前保存的环境中

                map.restore();

            }

            //加载时，执行一次，避免刷新时，有一秒的延迟

            drawClock();

            //开启定时器

            window.setInterval(drawClock, 1000);

        </script>

    </div>

</body>

</html>

效果图：

HTML5 之Canvas 绘制时钟 Demo的更多相关文章

使用canvas绘制时钟
使用canvas绘制时钟什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
html5 Canvas绘制时钟以及绘制运动的圆
1.绘制时钟  <script type="text/javascript"> window.onload=function(){ ...
HTML5 之Canvas绘制太阳系
<!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...
Canvas绘制时钟
①首先在HTML的body标签中添加一个canvas标签,用于绘制时钟. <canvas id="myCanvas" width="600" height ...
html5的canvas绘制迷宫地图
canvas标签一直是html5的亮点,用它可以实现很多东西.我想用它来绘画像迷宫那样的地图.借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接). 如图:如果你想要画像这样的迷宫地图,如果不 ...
小任务之Canvas绘制时钟
背景图的绘制(大圆.数字.小圆点) 掌握基础知识:圆的绘制(arc方法),关于圆的弧度的计算,数学中关于sin cos的用法圆的弧度为2*Math.PI 12个数字分得弧度每个为2*Math.PI/ ...
【HTML5】Canvas绘制基础
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
用canvas绘制时钟
用canvas做时钟其实很简单,下面是我做出的效果: 是不是还挺漂亮的? 下面上代码: html <div class="whole"> <canvas id=& ...
HTML5 Canvas 绘制时钟
网上会看到很多绘制的时钟,看代码也是云里雾里,自学了下Canvas,觉得不难,就自己做了一个. 先看一下截图: 比较简陋,但是该有的都有了,样式只加了个阴影. html代码就不贴了,就一个canvas ...

随机推荐

shell命令locate
介绍 linux上做维护的时候经常会去查找某个文件路径如果不需要特殊的查找匹配(比如时间大小...) 格式化的输出(此处用find) 建议用locate命令因为locate命令查找速度非常的快 ...
java的静态代理和动态代理（jdk、cglib）
一.代理模式代理的概念来自于设计模式中的代理模式,先了解一下代理模式 1.结构图 2.参与者 Subject:接口,定义代理类和实际类的共用接口 RealSubject:实际类,实现Subject这 ...
Jquery 随便写些知识点
针对jQuery随便写些觉得还挺实用的一些东西,也没系统的去理一番,只是想到哪写到哪,写的不完全也请多见谅. jQuery和其他javascript库产生$符号冲突了?$符号想必用jQuery的人都不 ...
[转]如何启用Ubuntu的休眠模式
大家都知道 Windows 有休眠模式,其实 Ubuntu 也有.休眠模式简单来说,就是可以在用户暂时离开时将内存中的所有内容都写入到硬盘当中,当用户下次开机时,就可以直接启动到上次保存的时间状态. ...
webView(简单的浏览器)
#import "MJViewController.h" @interface MJViewController () <UISearchBarDelegate, UIWeb ...
BigDecimal 类型数据的一些应用
1.比较大小可以通过BigDecimal的compareTo方法来进行比较.返回的结果是int类型,-1表示小于,0是等于,1是大于. 例如: if(a.compareTo(b) == -1){ a ...
maven学习讲解
参考链接:http://www.cnblogs.com/bigtall/archive/2011/03/23/1993253.html 1.前言 Maven,发音是[`meivin],"专家 ...
easyUI增加视图分组的办法
1.在JSP头文件中引入如下代码 <script type="text/javascript" src="${pageContext.request.context ...
11 Clever Methods of Overfitting and how to avoid them
11 Clever Methods of Overfitting and how to avoid them Overfitting is the bane of Data Science in th ...
HTTP2.0介绍
HTTP2.0的所有通信都是在一个TCP连接上完成的. 1.信息传输术语 1.1 流虚拟信道,可以承载双向消息,每个流都有一个唯一的整数标识符(1.2....N); 1.2 消息逻辑上的HTTP消 ...

HTML5 之Canvas 绘制时钟 Demo

HTML5 之Canvas 绘制时钟 Demo的更多相关文章

随机推荐

热门专题