显示效果如下

源码如下：

<!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. 因实现本地浏览器访问nginx修改配置文件后，安装vsftpd失败

    解决方法如下(修改dns配置) vi /etc/resolv.conf 在此文件最后加入:nameserver 8.8.8.8 如果没有vi编辑器可用: echo "nameserver 8 ...

  2. python 函数名，闭包

    1.函数名字的应用 函数名是什么? 函数名是函数的名字,本质:变量,特殊变量 函数名+() ———>执行此函数: 2.函数名的赋值: def func2(): print(44) f = fun ...

  3. etcd服务端和客户端安装

    下载地址: 服务端:http://download.csdn.net/download/wuxun1997/9841277 客户端:http://download.csdn.net/download/ ...

  4. 远程debug配置

    1. 第一步,debugconfig 2. 在启动文件中添加 Set JAVA_OPTS=-Xdebug -Xrunjdwp:transport=dt_socket,address=,server=y ...

  5. 【转】jmeter压力测试

    jmeter压力测试 Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试但后来扩展到其他测试领域, 是压力测试的首选软件 ...

  6. ubuntu安装composer

    1.下载composer.phar wget https://getcomposer.org/composer.phar 2.重命名composer.phar为composer mv composer ...

  7. MySQL优化方法论

    MySQL优化方法 主机 操作系统 数据库 应用 MySQL优化理论 吞吐率(Throughput) VS 延时(Latency) 吞吐率: 我们一般使用单位时间内服务器处理的请求数来描述其并发处理能 ...

  8. Rest之路 - 搭建开发环境

    准备Jersey框架和类库 从官网 (https://jersey.java.net/download.html) 下载最新的zip文件,解压后如下图: lib: 包含Jersey的所有类库. ext ...

  9. oracle记录错误存储过程

    CREATE OR REPLACE PROCEDURE SP_ERROR_LOGS_PRO(v_pro_name VARCHAR2, v_step_name VARCHAR2, v_date VARC ...

  10. windows重启mysql命令

    开始->运行->cmd 停止:net stop mysql 启动:net start mysql 前提MYSQL已经安装为windows服务