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

随机推荐

[Xcode 自带svn的使用]
xcode自带svn的使用 1.代码中某文件后面有 “M” 标记,表示该文件已被修改,需要commit. (右键该文件 -> source control -> c ...
第三次作业——K米评测
第一部分调研,评测 1.第一次上手体验其实让我下载一个APP并且长期使用它是一件特别难的事情,不仅是因为占空间,需要注册个人信息,绑定账号,更是因为每款软件的功能虽然都很齐全,但是你并在没有真正用 ...
更改primefaces theme
PrimeFaces is using jQuery ThemeRoller CSS theme framework, and come with 30+ pre-designed themes th ...
mac系统的一些操作常识
mac系统如何显示和隐藏文件苹果Mac OS X操作系统下,隐藏文件是否显示有很多种设置方法,最简单的要算在Mac终端输入命令.显示/隐藏Mac隐藏文件命令如下(注意其中的空格并且区分大小写): 显 ...
Win8.1微软官方最终正式版ISO镜像文件
Win8.1微软官方最终正式版ISO镜像文件经过预览版,测试版.开发版本等几个乱七八糟的版本后,2013年10月17日,微软终于如约的发布了Win8.1最终正式版. Win8.1和win8的区别 1 ...
k-nearest-neighbor算法
1. kNN 1.1 基本的kNN模型 kNN(k-nearest neighbor)的思想简单来说就是,要评价一个未知的东西U,只需找k个与U相似的已知的东西,并通过k个已知的,对U进行评价.假如要 ...
使用RawSocket进行网络抓包
aw socket,即原始套接字,可以接收本机网卡上的数据帧或者数据包,对与监听网络的流量和分析是很有作用的,一共可以有3种方式创建这种socket. 中文名原始套接字外文名 RAW SOCKET ...
Java——菜单组件
import java.awt.Container; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; i ...
redis删除list中指定index的值
Redis的List删除命令: lrem : lrem mylist 0 "value" //从mylist中删除全部等值value的元素 0为全部,负值为从尾部开始. ...
osharp3 整合 dbcontextscope 文章2 将dbcontext的创建收回到ioc管理
osharp3 整合 dbcontextscope 后,,dbcontextscope 对dbcontext管理的很好,做到,用到时创建,不用时销毁,下面看一个 trace aspx.page: En ...

HTML5 之Canvas 绘制时钟 Demo

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

随机推荐

热门专题