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 ...

随机推荐

Java中使用JDBC
JDBC简介 JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言 ...
lua中的table、stack和registery
ok,前面准备给一个dll写wrapper,写了篇日志,看似写的比较明白了,但是其实有很多米有弄明白的.比如PIL中使用的element,key,tname,field这些,还是比较容易混淆的.今天正 ...
开发新产品的三个验证阶段（EVT/DVT/PVT）
1.EVT, Engineering Validation Test 是针对工程原型机的验证,对象很可能是一大块开发板,或是很多块开发板:关键是要有足够时间和样品. 通常,如果是新平台,需要花的时间和 ...
SDUT 1400 马的走法(回溯法）
题目链接: 传送门马的走法 Time Limit: 1000MS Memory Limit: 65536K 题目描述在一个4*5的棋盘上,马的初始位置坐标(纵横)位置由键盘输入,求马能返 ...
Axure7.0中文汉化语言包下载 axure汉化包
Axure RP Pro 7.0 正式版 (兼容 6 版) 简体中文语言包支持 Axure RP Pro 正式版当前最新版本 7.0.0.3142 废话不多说,直接给下载地址: Axure7.0中 ...
日志分析第六章安装elasticsearch
在这里,以两台es集群为例. es集群健康状况有三种状态,这里我们搭建的es集群,只要两台不同时挂掉,数据不会丢失. green 所有主要分片和复制分片都可用 yellow 所有主要分片可用,但不是所 ...
Linux防火墙：iptables禁IP与解封IP常用命令
在Linux服务器被攻击的时候,有的时候会有几个主力IP.如果能拒绝掉这几个IP的攻击的话,会大大减轻服务器的压力,说不定服务器就能恢复正常了. 在Linux下封停IP,有封杀网段和封杀单个IP两种形 ...
脚本放在 <body> 元素的底部
建议把脚本放在 <body> 元素的底部. 这会提高网页加载速度,因为 HTML 加载不受制于脚本加载.
jquery条件选择多个元素（与、或者）
或者:选择器用逗号分隔,这也对应了jquery对象转dom为$(obj)[0]的写法如:$('div[name="a"],div[name="b"]') :h ...
JavaWeb学习笔记——jsp基础语法
1.JSP注释显式注释  隐式注释,隐式注释在客户端无法看见 // /* */ <% 注释内容 %> 2.Scriptlet(小脚本程序) 所有嵌入 ...

HTML5 之Canvas 绘制时钟 Demo

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

随机推荐

热门专题