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

随机推荐

Error: cannot find a valid baseurl for repo: rpmfusion-free 解决办法
今天在玩CentOS的时候出现了: Error: cannot find a valid baseurl for repo: rpmfusion-free 这个问题真到好恶心啊,以前一直使用到是ubu ...
基本概率分布Basic Concept of Probability Distributions 7: Uniform Distribution
PDF version PDF & CDF The probability density function of the uniform distribution is $$f(x; \al ...
A.Kaw矩阵代数初步学习笔记 6. Gaussian Elimination
“矩阵代数初步”(Introduction to MATRIX ALGEBRA)课程由Prof. A.K.Kaw(University of South Florida)设计并讲授. PDF格式学习笔 ...
Pythonn new-style class and old-style class
In [1]: class old(): ...: a = 1 ...: In [2]: o = old() In [3]: o.__class__ Out[3]: <class __main_ ...
django 模板中url的处理
在模板中直接添加‘/home’这样的链接是十分不推荐的,因为这是一个相对的链接,在不同网页中打开可能会返回不一样的结果. 所以推荐的是 <a href="{{ object.get_a ...
Gated Recurrent Unit (GRU)公式简介
update gate $z_t$: defines how much of the previous memory to keep around. \[z_t = \sigma ( W^z x_t+ ...
primefaces 上传文件尺寸受限制 Connection terminated as request was larger than
standalone.xml like this: <http-listener name="default" socket-binding="http" ...
runtime - Method详细笔记
Runtime中Method详细介绍 1.找到它,认识它 //*> 在objc/runtime.h中定义了Method类型,Method是一个objc_method结构体指针,结构体中包含SEL ...
python 安装包总结
PIL安装(Centos6.6) 1. 安装PIL所需的系统库 (centos6.6)yum install zlib zlib-devel -yyum install libjpeg libjpeg ...
深入JVM-垃圾收集器常用的GC参数
1.与串行回收器相关的参数 -XX:+UseSerialGC:在新生代和老年代使用串行收集器 -XX:SurvivorRatio:设置eden区大小和survivor区大小的比例 -XX:Preten ...

HTML5 之Canvas 绘制时钟 Demo

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

随机推荐

热门专题