显示效果如下

源码如下：

<!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. Jenkins的用户管理

    用户管理入口 Jenkins首页有一个用户,但是只能从那查看用户列表和信息,管理用户的入口在Jenkins->系统管理->管理用户 新建用户 在管理用户左侧有一个新增用户,点击后按照表单填 ...

  2. paste:linux合并两个文件中的列（左右合并）

    [root@www ~]# paste [-d] file1 file2 选项与参数: -d  :后面可以接分隔字符.默认是以 [tab] 来分隔的! -   :如果 file 部分写成 - ,表示来 ...

  3. HDU 5705 Clock(模拟，分类讨论）

    Clock Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Submi ...

  4. html 文字垂直居中

    html  文字垂直居中 <span style="float:right; padding-right:30px;line-height:64px" class=" ...

  5. PHP下的命令行执行 php -S localhost -t public（public是根目录，也是入口文件所在目录，是LARAVEL的）

    PHP 的命令行模式     以下是 PHP 二进制文件(即 php.exe 程序)提供的命令行模式的选项参数,您随时可以通过 PHP -h 命令来查询这些参数. Usage: php [option ...

  6. 根文件系统的构建与分析（四）之瑞士军刀busybox生成系统基本命令

    根文件系统的构建与分析(四) 转载请注明 http://blog.csdn.net/jianchi88   Author:Lotte   邮箱:baihaowen08@126.com ls /bin, ...

  7. 爬取github上流行的python项目

    # -*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" import requests from pyquery import PyQ ...

  8. python's twenty ninthday for me 模块和包

    模块 和 脚本的 区别:   如果一个py文件被导入了,就是一个模块. 如果这个py文件被直接执行,这个被直接执行的文件就是一个脚本. 模块:1,没有具体的调用过程.2,能对外提供功能. pyc文件: ...

  9. JS四级复选框选中层次关系

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 教你实现GPUImage - OpenGL渲染原理<转>

    http://www.open-open.com/lib/view/open1483943550976.html