canvas制作时钟

最新推荐文章于 2021-06-09 22:52:32 发布
最新推荐文章于 2021-06-09 22:52:32 发布
阅读量438 收藏
点赞数

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>时钟</title>   
</head>
<body>
    <canvas id="clock" width="500" height="500" style="background-color:black;">你的浏览器不支持canvas</canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("clock");
        var cxt = canvas.getContext("2d");

        function drawClock() {
            var now = new Date();
            var sec = now.getSeconds();
            var min = now.getMinutes();
            var hour = now.getHours();
            hour > 12 ? hour - 12 : hour;
            hour += (min / 60);

            //先清空画布
            cxt.clearRect(0, 0, canvas.width, canvas.height);


            //美女图片作为表盘背景    
            var img = new Image();
            img.src = "tw.png";
            cxt.drawImage(img, 46, 46);
            //img.onload = function () {
            //    cxt.drawImage(img, 0, 0);
            //}

            //画表盘大圆 圆心：x=250 y=250
            cxt.strokeStyle = "#00FFFF";
            cxt.lineWidth = 10;
            cxt.beginPath();
            cxt.arc(250, 250, 200, 0, 360);
            cxt.stroke();
            cxt.closePath();

            //时刻度
            for (var i = 0; i < 12; i++) {
                cxt.save();//保存当前状态
                cxt.lineWidth = 7;
                cxt.strokeStyle = "#FFFF00";

                //设置原点
                cxt.translate(250, 250);
                //设置旋转角度
                cxt.rotate(30 * i * Math.PI / 180);//弧度   角度*Math.PI/180
                cxt.beginPath();
                cxt.moveTo(0, -175);
                cxt.lineTo(0, -195);
                cxt.stroke();
                cxt.closePath();
                cxt.restore();//把原来状态恢复回来
            }

            //分刻度
            for (var i = 0; i < 60; i++) {
                cxt.save();
                cxt.lineWidth = 5;
                cxt.strokeStyle = "#FFFF00";
                cxt.translate(250, 250);
                cxt.rotate(i * 6 * Math.PI / 180);
                cxt.beginPath();
                cxt.moveTo(0, -185);
                cxt.lineTo(0, -195);
                cxt.stroke();
                cxt.closePath();
                cxt.restore();
            }


           
            //以下的时针、分针、秒针均要转动，所以在这里要设置其异次元空间的位置
            //根据当前的小时数、分钟数、秒数分别设置各个针的角度即可
            //-----------------------------时针-----------------------------
            cxt.save();
            cxt.lineWidth = 7;
            cxt.strokeStyle = "#00FFFF";
            cxt.translate(250, 250);
            cxt.rotate(hour * 30 * Math.PI / 180);//每小时旋转30度
            cxt.beginPath();
            cxt.moveTo(0, -130);
            cxt.lineTo(0, 10);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();

            //-----------------------------分针-----------------------------
            cxt.save();
            cxt.lineWidth = 5;
            cxt.strokeStyle = "#FFFF00";
            cxt.translate(250, 250);
            cxt.rotate(min * 6 * Math.PI / 180);//每分钟旋转6度
            cxt.beginPath();
            cxt.moveTo(0, -150);
            cxt.lineTo(0, 10);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();

            //-----------------------------秒针-----------------------------
            cxt.save();
            cxt.lineWidth = 3;
            cxt.strokeStyle = "#FF0000";
            cxt.translate(250, 250);
            cxt.rotate(sec * 6 * Math.PI / 180);//每秒旋转6度
            cxt.beginPath();
            cxt.moveTo(0, -170);
            cxt.lineTo(0, 10);
            cxt.stroke();
            cxt.closePath();


            //美化表盘，画中间的小圆
            cxt.beginPath();
            cxt.arc(0, 0, 7, 0, 360);
            cxt.fillStyle = "#FFFF00";
            cxt.fill();
            cxt.strokeStyle = "#FF0000";
            cxt.stroke();
            cxt.closePath();

            //秒针上的小圆
            cxt.beginPath();
            cxt.arc(0, -140, 7, 0, 360);
            cxt.fillStyle = "#FFFF00";
            cxt.fill();
            cxt.stroke();
            cxt.closePath();
            cxt.restore();


            //显示时间
            cxt.font = "18px 微软雅黑";
            cxt.lineWidth = 2;
            cxt.fillStyle = "#0000FF";
            hour=now.getHours();
            var str = hour > 10 ? hour : ("0" + hour) + ":" + (min > 10 ? min : ("0" + min))
            cxt.fillText(str, 225, 380);

            //中国制造
            cxt.font = "12px 宋体";
            cxt.lineWidth = 1;
            cxt.fillText("Made In China", 210, 400);
        }

        drawClock();
        setInterval(drawClock, 1000);
    </script>
</body>
</html>

youchengyuanzhi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用canvas绘制时钟
NanChen的博客
09-09 462
是的，beginPath()是重新开始新路径，而把之前的路径都清空掉。arc方法是2D画布的一个绘制圆状态的一个方法，arc有六个参数：arc(x, y, r, sAngle, eAngle, counterclockwise);stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。使用clip()函数将该区域（由rect()、arc()方法指定的绘图区域）设定为裁选区。使用Canvas的绘制函数比如，rect()、arc()之类的方法选择好绘图区域。
搞懂 ctx.restore();ctx.save()；ctx.beginPath();
热门推荐
guitarist0505的博客
07-17 1万+
在做canvas时钟时，ctx.restore();ctx.save()；ctx.beginPath();反复用到！ 那么，这几个函数到底是什么功能呢?有什么区别和联系呢？ 1.beginPath() w3c上的解释：beginPath() 方法在一个画布中开始子路径的一个新的集合。 也就是说，运行到这个函数时，context中止当前的路径，立刻把当前的坐标设置为起点(0,0)，开始一条新...
Html Canvas之动态表盘时钟（带数字刻度数）
Super_cute_的博客
04-01 2237
Html Canvas之动态表盘时钟（带数字刻度数） 能够实现指针按标准时间走，并加入一个倒计时。 效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>clock</title> </head> <...
canvas save()和canvas restore()状态的保存和恢复使用方法及实例
qq_36742720的博客
11-30 1027
新的一天又来啦，最近这些天一直是阴雨连绵的，也是醉了，不过还好今天终于可以看到灿烂的阳光了，现在这种温度，最喜欢站在太阳下晒着太阳，身上暖暖的，心情也会好很好，o(￣︶￣)o 好啦，不扯这些闲篇了，进入正题吧，今天分享下  canvas.save()和canvas.restore()状态的保存和恢复使用方法及实例 canvas.save()用来保存先前状态的  canvas.restore...
html5时钟代码菜鸟课程,html5绘制时钟动画
weixin_26767391的博客
06-07 480
这篇文章主要介绍了html5绘制时钟动画,需要的朋友可以参考下复制代码代码如下:var clock=document.getElementById("clock");var cxt=clock.getContext("2d");function drawNow(){var now=new Date();var hour=now.getHours();var min=now.getMinutes()...
canvas 制作时钟
weixin_30293079的博客
12-13 85
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 6 <title>菜鸟教程(runoob.com)</title> 7 </head> 8 <body> ...
Canvas制作时钟
GuanJdoJ的博客
08-13 697
一、预览 二、代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #mycanvas{ position: absolute; left:50%; m...
html5画布动态时钟,HTML5之canvas绘制动态时钟
weixin_29688227的博客
06-09 939
最近看了一些HTML5的网页，感觉很高端，于是开始上手HTML5,跟着网上的视频学，收获还是不小，今天说说这几天学的HTML5新加的canvas标签，通过写这篇博客来巩固一下这几天学到的东西。canvas标签是是HTML5新加的绘制背景的，但是正像"canvas"的意思“画布”一样，它只是一张给别人在上面画东西的东西，就像我们小学时的美术本一样是给我们来 画画的纸，自己并不能画什么东西，所以要想在...
canvas学习笔记3--绘制时钟
weixin_44679078的博客
10-07 147
translate移动 canvas的translate相当于移动画布的坐标原点位置，而且在这之后画的东西也是按照移动后的坐标原点来画 var canvas = document.querySelector("#canvas") var cxt = canvas.getContext("2d") cxt.translate(300,0) cxt.fillStyle = "deepskyblue" //填充一个矩形 cxt.fillRect(100,100,300,100) rotate旋转 参数是带π的
LABVIEW TCP通讯调试助手
07-29
本文接收如何利用Labview的TCP通讯工具做通讯，这里手把手教各位做一个简单的TCP通讯调试助手，可以局域网互相聊天哦！ 具体介绍见下面连接：https://download.csdn.net/download/weixin_41671635/89595897
机器学习与人工智能教程
07-29
机器学习与人工智能教程
零基础入门转录组数据分析-WGCNA(加权基因共表达网络) 配套资源
07-29
零基础入门转录组数据分析-WGCNA(加权基因共表达网络) https://blog.csdn.net/weixin_49878699/article/details/140304846 教程配套的原始数据+代码+处理好的数据文件
【创新未发表】Matlab实现引力搜索优化算法GSA-Kmean-Transformer-BiLSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
原始ISET，用作ISETIO的基础-图像系统工程工具箱-matlab
07-29
原始ISET，用作ISETIO的基础 相机（Cam）的图像系统工程工具箱（ISET）。ISETCam是基础存储库。它包括其他ISET存储库用于表示场景、光学、能量、量子、颜色和软件实用程序的基本例程。ISETCam是运行ISETBio和大多数其他ISET存储库（如ISET3D、ISETAuto、ISETLens）所必需的。 原始ISET的开源版本，用作ISETIO的基础
【创新未发表】Matlab实现能量谷优化算法EVO-Kmean-Transformer-BiLSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
毕业设计，基于Java+Swing+SqlServer开发的图书管理系统，内含完整源代码，数据库，讲解视频
07-29
毕业设计，基于Java+Swing+SqlServer开发的图书管理系统，内含完整源代码，数据库，讲解视频 图书管理系统，是一个由人、计算机等组成的能进行管理信息的收集、传递、加工、保存、维护和使用的系统。利用信息控制企业的行为；帮助企业实现其规划目标。
Python数据分析深度学习：Pandas、NumPy、SciPy与Matplotlib（含代码示例）
07-29
如何利用Python的Pandas、NumPy、SciPy与Matplotlib进行数据分析与可视化。首先，介绍了Pandas库在数据预处理中的应用，包括数据读取、清洗、转换等操作。接着，详细讲解了NumPy在数值计算中的作用，涵盖数组创建、运算、索引和切片。然后，文章介绍了SciPy在统计分析中的应用，包括常见统计函数、统计检验和分布模型。最后，讨论了Matplotlib在数据可视化中的功能，展示了折线图、柱状图、散点图和直方图的绘制方法。通过一个房价预测的实战案例，综合应用了这些工具，展示了数据分析的完整流程，从数据处理到模型训练和预测。本文提供了丰富的示例代码，旨在帮助读者深入理解和掌握Python数据分析的核心技术。
全国大学生电子设计大赛项目合集全国电赛优秀作品开源基于STC15W4K61S4的微型四旋翼
最新发布
07-29
电赛，全国大学生电子设计大赛项目合集全国电赛优秀作品开源基于STC15W4K61S4的微型四旋翼
实现HTML5 Canvas绘制时钟
06-01
好的，下面是一个简单的HTML5 Canvas绘制时钟的示例代码： ``` <!DOCTYPE html> <html> <head> <title>Canvas时钟</title> <style> canvas { border: 2px solid black; } </style> </head> <body> <canvas id="clock" width="200" height="200"></canvas> <script> function drawClock() { // 获取Canvas元素 var canvas = document.getElementById("clock"); var ctx = canvas.getContext("2d"); // 获取Canvas中心点坐标 var centerX = canvas.width / 2; var centerY = canvas.height / 2; // 绘制表盘 ctx.beginPath(); ctx.arc(centerX, centerY, 80, 0, 2 * Math.PI); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制刻度 for (var i = 1; i <= 12; i++) { var angle = i * Math.PI / 6; var x = centerX + 60 * Math.sin(angle); var y = centerY - 60 * Math.cos(angle); ctx.beginPath(); ctx.arc(x, y, 5, 0, 2 * Math.PI); ctx.fillStyle = "black"; ctx.fill(); } // 绘制时针 var now = new Date(); var hour = now.getHours() % 12; var minute = now.getMinutes(); var second = now.getSeconds(); var hourAngle = (hour + minute / 60) * Math.PI / 6; var hourX = centerX + 40 * Math.sin(hourAngle); var hourY = centerY - 40 * Math.cos(hourAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(hourX, hourY); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制分针 var minuteAngle = minute * Math.PI / 30; var minuteX = centerX + 60 * Math.sin(minuteAngle); var minuteY = centerY - 60 * Math.cos(minuteAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(minuteX, minuteY); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制秒针 var secondAngle = second * Math.PI / 30; var secondX = centerX + 60 * Math.sin(secondAngle); var secondY = centerY - 60 * Math.cos(secondAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(secondX, secondY); ctx.strokeStyle = "red"; ctx.stroke(); } // 每秒钟更新时钟 setInterval(drawClock, 1000); </script> </body> </html> ``` 这段代码使用Canvas绘制了一个时钟，并且每秒钟更新一次。你可以将代码复制到一个HTML文件中运行，就可以看到时钟的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值