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

随机推荐

拼装query的sql语句
com.kingdee.bos.metadata.query.util.QuerySqlAccessBase //打开一个绑定query界面,获取query查询的最终sql,231行
加州大学伯克利分校Stat2.3x Inference 统计推断学习笔记: Section 2 Testing Statistical Hypotheses
Stat2.3x Inference(统计推断)课程由加州大学伯克利分校(University of California, Berkeley)于2014年在edX平台讲授. PDF笔记下载(Acad ...
GridView控件RowDataBound事件中获取列字段值的几种途径！！！
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == ...
fzuoop期中练习
5-1 科学计数法的值科学计数法是一种数学专用术语.将一个数表示成 a×10的n次幂的形式,其中1≤|a|<10,n为整数,这种记数方法叫科学计数法.例如920000可以表示为9.2*10^5 ...
Code笔记之：防盗链（图片）
图片防盗链参考:http://bbs.csdn.net/topics/330080045 应该是”10种图片防盗的方法“,而不是”10种图片防盗链的方法“,不过看搜索防盗链的人要多一点,所 ...
Linux系统被入侵后处理经历
服务器托管在外地机房. 突然,频繁收到一组服务器ping监控不可达邮件,赶紧登陆zabbix监控系统查看流量状况. 可见流量已经达到了800M左右,肯定不正常,马上尝试SSH登陆系统,不幸的事,这种情 ...
sudo和rpm命令
sudo是linux系统管理指令,是允许系统管理员让普通用户执行一些或者全部的root命令的一个工具,如halt,reboot,su等等.这样不仅减少了root用户的登录和管理时间,同样也提高了安全 ...
使用Keil uVision下载hex文件
在uVision3/uVision4/uVision5中,可以创建一个项目用来下载HEX文件到flash里面. 具体步骤如下: 1. 在菜单中,选择 Project - New Project... ...
JQuery------prevAll(),nextAll(),attr()方法的使用
$(this).nextAll(".Rec").find("input").attr("checked", false); $(this). ...
WinForm------PopupMenu控件的使用
转载: http://www.cnblogs.com/xlx0210/archive/2010/07/14/1777366.html

HTML5 之Canvas 绘制时钟 Demo

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

随机推荐

热门专题