显示效果如下

源码如下：

<!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. codevs4189字典

    沙茶 题目大意:求某一个字符串前缀有没有在n个字符串前缀里出现过 题解:Trie树 查询前缀有没有出现 代码: //codevs4189 #include<iostream> #inclu ...

  2. Android Studio 打包及引用 AAR（可能是史上最详细的 ）

    https://www.jianshu.com/p/1777a634db5e Android Library(AAR) 的好处 Android 库在结构上与 Android 应用模块相同.它可以提供构 ...

  3. (转)android adb pull and push

    adb命令下pull的作用是从手机端向电脑端拷文件. 命令:adb pull /sdcard/**.txt   D:\                          说明:将手机卡中的某个文本文件 ...

  4. Python中if __name__ == 'main' 的作用和原理

    参考网址:http://mp.weixin.qq.com/s/kxxhOQ7KB_VMwWeUENX7OQ t1.py: print('Loving Python') def main(): prin ...

  5. Crypto 加密解密

    import binascii from Crypto.Cipher import AES #秘钥,此处需要将字符串转为字节 from utils import config from utils.e ...

  6. eclipse-连接TFS错误 <the server to respond with a valid http response>解决方法

    解决办法 如果普通凭证有多个,则将普通凭证给删除.

  7. NIOS EDS最容易出错的地方

    越来越多的人使用NIOS II.毕竟,NIOS II是世界上功能最多的软核处理器. NIOS EDS通常是在装QUARTUS的时候一起装上的.通常我们在用的时候都是以模板建立工程的. 在很多情况下,我 ...

  8. 【转】Jmeter在命令行运行技巧

    For non-interactive testing, you may choose to run JMeter without the GUI. To do so, use the followi ...

  9. 漫谈JVM之类加载机制（篇一）

    前言 最近在看一本书,发现代码里用到了Thread.currentThread().getContextClassLoader(),为什么类加载器还与线程有关系呢,为什么不直接使用ClassLoade ...

  10. PHP面向对象深入研究之【对象生成】

    对象 看个例子 <?php abstract class Employee { // 雇员 protected $name; function __construct( $name ) { $t ...