显示效果如下

源码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        body {

            width: 100%;

            height: 100%;

            overflow: hidden;

            background-color: gray;

        }

        #clock {

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%, -50%);

            background-color: #fff;

        }

    </style>

</head>

<body>

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

    <script>

        window.onload = function () {

            var canvas = document.querySelector("#clock");

            if (canvas.getContext) {

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

                move();

                setInterval(move, 1000);

                function move() {

                    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布

                    ctx.save();

                    // 初始化样式

                    ctx.translate(200, 200);

                    ctx.rotate(-90 * Math.PI / 180);

                    ctx.lineWidth = "8";

                    ctx.strokeStyle = "black";

                    ctx.lineCap = "round";

                    ctx.beginPath();

                    // 外层空心圆盘

                        ctx.save();

                        ctx.lineWidth = 14;

                        ctx.strokeStyle = "#325FA2";

                        ctx.beginPath();

                        ctx.arc(0, 0, 140, 0, 360 * Math.PI / 180);

                        ctx.stroke();

                        ctx.restore();

                        // 时针刻度

                        ctx.save();

                        ctx.beginPath();

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

                            ctx.rotate(30 * Math.PI / 180);

                            ctx.moveTo(120, 0);

                            ctx.lineTo(100, 0);

                        }

                        ctx.stroke();

                        ctx.restore();

                        // 分针刻度

                        ctx.save();

                        ctx.lineWidth = 3;

                        ctx.beginPath();

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

                            if (i % 5 != 0) {

                                ctx.moveTo(120, 0);

                                ctx.lineTo(117, 0);

                            }

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

                        }

                        ctx.stroke();

                        ctx.restore();

                        // 时针、分针、秒针、钟座

                        var date = new Date();

                        var s = date.getSeconds();

                        var m = date.getMinutes() + s / 60;

                        var h = date.getHours() + m / 60;

                        h = h > 12 ? h - 12 : h;

                        // 时针

                        ctx.save();

                        ctx.lineWidth = 14;

                        ctx.rotate(h * 30 * Math.PI / 180);

                        ctx.beginPath();

                        ctx.moveTo(-20, 0);

                        ctx.lineTo(80, 0);

                        ctx.stroke();

                        ctx.restore();

                        //分针

                        ctx.save();

                        ctx.lineWidth = 10;

                        ctx.rotate(m * 6 * Math.PI / 180);;

                        ctx.beginPath();

                        ctx.moveTo(-28, 0);

                        ctx.lineTo(112, 0);

                        ctx.stroke();

                        ctx.restore();

                        // 秒针

                        ctx.save();

                        ctx.lineWidth = 6;

                        ctx.strokeStyle = "#D40000";

                        ctx.fillStyle = "#D40000";

                        ctx.rotate(s * 6 * Math.PI / 180);

                        ctx.beginPath();

                        ctx.moveTo(-30, 0);

                        ctx.lineTo(83, 0);

                        ctx.stroke();

                            // 中心实心圆盘

                            ctx.beginPath();

                            ctx.arc(0, 0, 10, 0, 360);

                            ctx.fill();

                            // 秒针针头

                            ctx.beginPath();

                            ctx.arc(96, 0, 10, 0, 360);

                            ctx.stroke();

                        ctx.restore();

                    ctx.restore();

                }

            }

        }

    </script>

</body>

</html>

canvas时钟demo的更多相关文章

  1. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  2. Coffeescript实现canvas时钟

    前言 参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意 ...

  3. 》》canvas时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. 原生js之canvas时钟组件

    canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...

  5. canvas写的一个小时钟demo

    <!DOCTYPE html> <html> <head> <title>HTML5 Canvas Demo of clock</title> ...

  6. 移动端上传照片 预览+Draw on Canvas's Demo（解决 iOS 等设备照片旋转 90 度的 bug）

    背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...

  7. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  8. Canvas - 时钟绘制

    导语:距离上一次写canvas,已经过去两年半,如今业务需要,再次拾起,随手记录. [思考] 时钟的绘制主要在于圆的绘制:1. 使用context.arc()方法直接绘制圆或圆弧: 2. 使用圆的方程 ...

  9. 一个canvas的demo

    该demo放于tomcat下运行,否则出现跨域错误 <!DOCTYPE html> <html> <head> <meta charset="utf ...

随机推荐

  1. Bootstrap中时间（时间控件）的设计

    运用bootstrap的时间控件,生成时间选择器. 1.截图:有以下这些样式 10年视图        年视图         月视图         日视图         小时视图 2.视图设计: ...

  2. 浅谈CSRF跨站点请求

    CSRF是什么?      (Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 2007 年曾被列为互联网 20 大安全隐患之一,也被称为“One C ...

  3. stp 零部件 转为 装配图

    stp 零部件 转为 装配图 起因 由于收到的 stp 为零件件,这时如果输出 eDrawings 文件时是没有装配结构的. 解决 打开 stp 后在资源管理器中有一个实体的文件夹,点右键保存实体. ...

  4. the road of app test

    移动互联网测试——你应该要掌握的技能树 http://www.stuq.org/news/488 手机类型native app,hybrid app,web app http://www.uisdc. ...

  5. ror配置unicorn部署

    unicorn是目前在ror上比较流行的应用服务器,配合nginx用来直接部署rails程序,下面这种方式应该是共享socket,不断fork子进程,有点类似php-fpm的模式 安装unicorn ...

  6. Nginx安装过程

    1. 首先 ./configure --prefix=/usr/common/nginx --with-http_stub_status_module 报如下错误: 2. 从报的错可以看出缺少pcre ...

  7. Oracle LSNRCTL------监听器的启动和关闭

    对于DBA来说,启动和关闭oracle监听器是很基础的任务,但是Linux系统管理员或者程序员有时也需要在开发数据库中做一些基本的DBA操作,因此了解一些基本的管理操作对他们来说很重要. 本文将讨论用 ...

  8. java内存基础（一）

    博客园 闪存 首页 新随笔 联系 管理 订阅 随笔- 35  文章- 0  评论- 29  关于Java 数组内存分配一点认识  //总结:[ 数组引用变量存储在栈内存中,数组对象存储在堆内存当中.数 ...

  9. logging模块讲解

    logging模块 很多程序都有记录日志的需求,并且日志中包含的信息即有正常的程序访问日志,还可能有错误.警告等信息输出,python的logging模块提供了标准的日志接口,你可以通过它存储各种格式 ...

  10. PHP中静态变量的使用

    1.定义静态变量 public static $endpoint,$accessKeyId,$accessKeySecret,$bucket; 2.静态变量赋值 protected function ...