显示效果如下

源码如下：

<!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. python RabbitMQ队列使用

    python RabbitMQ队列使用 关于python的queue介绍 关于python的队列,内置的有两种,一种是线程queue,另一种是进程queue,但是这两种queue都是只能在同一个进程下 ...

  2. JS ready和onload事件 比较分析

    页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件); 二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onlo ...

  3. Ｄelphi 连接　Paradox

    应用TDataBase控件把DataBase的DriveName设为STANDARD,然后设置DataBase的Params中设置PATH=*.db文件地点目录DEFAULT DRIVER=PARAD ...

  4. Go入门教程

    本人录制的Go入门视频 20小时快速入门go语言视频:https://pan.baidu.com/s/1jJPsThk 基础编程 01.Go语言介绍02.环境搭建03.第一个Go程序 04.命名.变量 ...

  5. Android 中jar包封装及调用-转

    在android开发过程中,我们经常会有这种需求,自己开发一个类库jar包,提供给别人调用. 即把项目A封装成jar包,供项目B调用,而在项目B中调用项目A的activity的时候问题就出现了:找不到 ...

  6. quartz框架实现定时任务举例

    简单的定时任务功能可以通过原生的java.util.Timer定义执行时间规则.继承java.util.TimeTask来定义执行逻辑来实现,更方便的是利用开源的quartz框架,只需定义几个spri ...

  7. Verilog-2001新增特性

    l generate语句 Verilog-2001添加了generate循环,允许产生 module和primitive的多个实例化,同时也可以产生多个variable,net,task,functi ...

  8. mysql链接出现10060

    http://www.cnblogs.com/meetrice/p/5309666.html 使用navicate链接 http://www.cnblogs.com/cxint/p/7454054.h ...

  9. 【转】学习使用Jmeter做压力测试(一)--压力测试基本概念

    一.性能测试的概念 性能测试是通过自动化的测试工具模拟多种正常峰值及异常负载条件来对系统的各项性能指标进行测试.负载测试和压力测试都属于性能测试,两者可以结合进行. 通过负载测试,确定在各种工作负载下 ...

  10. MongoDB 4.X搭建

    一.MongoDB4.X搭建 1.下载mongdb安装包,在官网上找到对应的版本,我的是centos7 找到上面的连接,通过命令行: 2.将下载的mongodb-linux-x86_64-4.0.0. ...