Html5的Canva绘制动态时钟显示当前时间！！！（附源码）_canva动态案例代码-程序员宅基地

技术标签： canvas js html

前言

canvas设计一个显示当前时间的时钟

实现情况

在这里插入图片描述

思路

想让canvas绘制的东西动起来，最直接的办法就是不停的进行重绘，可能刚开始有些人会担心效率的问题，害怕代码过长冗余，可读性差的问题，实际上将绘制目标封装在函数中，然后放置函数在定时器中，每秒钟调用一次就可以实现，
首先是创建绘画环境

var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');

获取当前系统时间，使用的是Data方法,

 var now = new Date();
 var hour = now.getHours() > 12 ? now.getHours() - 12 : now.getHours();
 var min = now.getMinutes();
 var sec = now.getSeconds();

难点在于，秒针是需要每秒钟不停的转动的，秒针转动完了怎么让分针同步转动，同时带动时针转动一点点，实际上就是秒针

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style type="text/css">
        * {
    
            padding: 0;
            margin: 0;
        }
        #canvas{
      
            margin:100px 500px;
            /* background-color: #ee4e68; */
        }
       
    
    </style>
</head>
<body>
    <div class="container">
        <canvas id="canvas" width="500" height="500"></canvas>
    </div>
</body>
</html>
<script type="text/javascript">
    window.onload = function()
    {
    
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext('2d');
 
        runClock();
        var timer = setInterval(runClock, 1000);
 
        //运行
        function runClock() {
    
            //清除之前的绘画
            context.clearRect(0, 0, canvas.width, canvas.height);
 
            drawClock();
            
            var now = new Date();
            var hour = now.getHours() > 12 ? now.getHours() - 12 : now.getHours();
            var min = now.getMinutes();
            var sec = now.getSeconds();
 
            // 时针
            context.lineWidth = "15";
            context.strokeStyle = "#000";
            //保存状态 坐标原点0,0
            context.save();
            //移动画布，改变坐标原点为250,250
            context.translate(canvas.width / 2, canvas.height / 2);
            context.rotate((hour + min / 60 + sec / 3600 ) / 6 * Math.PI);
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(0, -110);
            context.stroke();
            //恢复状态 坐标原点回到0,0
            context.restore();
 
            //分针
            context.lineWidth = "10";
            context.strokeStyle = "#b6c978";
            context.save();
            context.translate(canvas.width / 2, canvas.height / 2);
            context.rotate((min + sec / 60) / 30 * Math.PI);
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(0, -130);
            context.stroke();
            context.restore();
 
            //秒针
            context.lineWidth = "5";
            context.strokeStyle = "#e9e6b3";
            context.save();
            context.translate(canvas.width / 2, canvas.height / 2);
            context.rotate(sec / 30 * Math.PI);
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(0, -160);
            context.stroke();
            context.restore();
            //中间的圆点
            context.beginPath();
            context.lineWidth = "10";
            context.strokeStyle = "#999";
            //顺时针false
            context.arc(250, 250, 5, 0, 360, false);
            context.stroke();
        }
 
        //绘制表盘
        function drawClock() {
    
            
            context.beginPath();
            context.lineWidth = "10";
            context.strokeStyle = "#b490d0";
            context.arc(250, 250, 200, 0, 360, false);
            context.stroke();
 
            //下面要改变原点 所以先保存当前状态
            context.save();
 
            //改变原点
            context.translate(canvas.width / 2, canvas.height / 2);
 
            //时刻度
            for (var i = 1; i <= 12; i++)
            {
    
               
                context.rotate( 1 / 6 * Math.PI);
                context.beginPath();
                // context.moveTo(0, -180);
                // context.lineTo(0, -200);
                context.moveTo(0, -170);
                context.lineTo(0, -190);
                context.stroke();
 
                // context.restore();
            }
 
            //分秒刻度
            context.lineWidth = "5";
            for (var i = 1; i <= 60; i++)
            {
    
                // context.save();
                // context.rotate(i * 6 / 180 * Math.PI);
                context.rotate( 1 / 30 * Math.PI);
                context.beginPath();
                context.moveTo(0, -170);
                context.lineTo(0, -190);
                context.stroke();
 
                // context.restore();
            }
 
            //回复坐标原点为0,0
            context.restore();
        } 
    }
</script>

实现思路

本文链接：https://blog.csdn.net/yingshuangtu/article/details/119652567

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

No.5-VulnHub-W1R3S: 1-Walkthrough渗透学习_vulnhub的w1rs3-程序员宅基地

文章浏览阅读1.1k次。**VulnHub-W1R3S: 1-Walkthrough**靶机地址：https://www.vulnhub.com/entry/w1r3s-101,220/靶机难度：中级（CTF）靶机发布日期：2018年2月5日靶机描述：You have been hired to do a penetration test on the W1R3S.inc individual server ..._vulnhub的w1rs3

python因子分析_python中的因子分析简介-程序员宅基地

文章浏览阅读7k次，点赞5次，收藏48次。python因子分析Factor Analysis (FA) is an exploratory data analysis method used to search influential underlying factors or latent variables from a set of observed variables. It helps in data interpretatio..._python 因素分析

python自动写作ai_python自动写作ai_ai自动写作python python编程100例-程序员宅基地

文章浏览阅读927次。人工智能和python是什么关系？人工智能是一个大概念。人工智能项目的具体实施将联系机器学习和深度学习框架。这些框架大多是基于python开发的。因此，为了深入开发人工智能项目，学习python语言也是必要的代码一定要人去写吗，能不能用Python弄个人工智能来写C ？请为我写一个软件。电脑：我能写一百万种软件。你想要哪一个？人：我想写一个聊天工具。电脑：我已经找回了现成的软件微信，可以吗？人民：..._实现python机器学习自动去写小说

java 二进制结构体_Java位运算符及二进制常识-程序员宅基地

文章浏览阅读317次。一、位运算二、位移运算三、二进制数以Java中最常使用的int类型为例(32位)。㈠符号位二进制数最左端的数字为符号位：0代表正，1代表负。㈡最大与最小⑴ 1是最小的正整数，符号位为0，最后一位为1，其它全部为0。递增：二进制数右端每次加1(逢2进1),一直到31个非符号位的0全部变为1，得到最大的正整数2147483647。⑵ -1是最大的负整数，符号位为1，其它31位也全部为1。递..._jna 二进制转结构体

Android 百度地图开发（一）--- 申请API Key和在项目中显示百度地图-程序员宅基地

文章浏览阅读73次。最近自己想研究下地图，本来想研究google Map，但是申请API key比较坑爹，于是从百度地图入手，其实他们的用法都差不多，本篇文章就带领大家在自己的Android项目中加入百度地图的功能，接下来我会写一系列关于百度地图的文章，欢迎大家到时候关注！一申请API key 在使..._百度地图安卓代码设置key

CodeReview Learning-程序员宅基地

文章浏览阅读153次。目录0. 引言1. 代码检视的指导思想2. 代码检视的内容3. 回归测试0. 引言代码检视(Code Review)是指软件开发人员在完成代码设计、编写、调试后展开的个人或群体性的代码阅读过程，代码检视的目的是发现代码中的设计问题、格式问题、逻辑问题、语法问题等，从而保证代码的高质量交付。从软件工程的角度讲，在代码检视阶段发现代码问题的成本是低廉的，所以严..._缺陷密度与代码评审行数的关系

随便推点

出租车Jt/T 905协议与部标1078协议融合的网约车视频监控平台-程序员宅基地

文章浏览阅读1.3k次。出租车jt/t 905协议，是jt/t 808协议的一个变种，设计者将部标808协议拿过来，并不是单纯的增加网约车相关的指令集，而且对原有的指令如定位0×0200指令也进行了修改，经过一通剧烈的修改，面目全非，协议已经与808协议本身并不兼容，这是比较失败的地方，保持兼容性，才能使协议更加让硬件和网约车平台接受和开发推广，没有经验的协议设计者和标准制定者高高在上不考虑兼容性，给硬件厂家和平台开发人..._jt808 与 jt905

提示“Resource temporarily unavailable”的原因及解决办法-程序员宅基地

文章浏览阅读3.4k次。问题：Linux环境下编程时，在读串口时，出现“Resource temporarily unavailable”的错误提示。原因：串口设置成了非阻塞模式，但是没有用select去判断是否有数据到来就去读。解决方法：要么将串口设置成阻塞模式，要么使用select。转载于:https://www.cnblogs.com/nufangrensheng/p/3813298.html..._rmmod: can't unload module 'imx6uirq': resource temporarily unavailable

java构造扑克牌算法_java扑克牌算法-程序员宅基地

文章浏览阅读1.3k次。java扑克牌算法java扑克牌算法1、实验内容或题目(1) 请定义一个名为Card的扑克牌类，该类有两个private访问权限的字符串变量face和suit：face描述一张牌的牌面值(如："Ace", "Deuce", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Jack", "Queen..._请定义一个名为card的扑克牌类,该类有两个private访问权限的字符串变量face和suit