JS+H5 Canvas实现时钟效果

最新推荐文章于 2023-07-26 16:00:48 发布
最新推荐文章于 2023-07-26 16:00:48 发布
阅读量432 收藏 1
点赞数
分类专栏： h5 js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yytIcon/article/details/81102306
版权
js 同时被 3 个专栏收录
18 篇文章 0 订阅
订阅专栏
html
5 篇文章 0 订阅
订阅专栏
h5
1 篇文章 0 订阅
订阅专栏

用JavaScript+Canvas来实现最简单的时钟效果。

效果图：

先看html代码：

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/demo3.js" ></script>
	</head>
	<body>
		<canvas id = "canvas"></canvas>
	</body>
</html>

JavaScript代码：

var canvas,context;
function draw(){//定义划时钟的方法
	var data = new Date();
	var hHoure = data.getHours();
	var mMin = data.getMinutes();
	var sSec = data.getSeconds();
	var hValue = (hHoure*30+mMin/2-90)*Math.PI/180; 
	var mValue = (mMin*6-90)*Math.PI/180;
	var sValue = (sSec*6 -90)*Math.PI/180;
	var x = 200,y = 200,r = 150;

	context.clearRect(0,0,canvas.width,canvas.height);
	context.moveTo(x,y);
	context.arc(x,y,r,0,6*Math.PI/180,false);
	//
	context.beginPath();
	context.lineWidth = 1;
	for(var i = 0;i<60;i++){
		context.moveTo(x,y);
		context.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
	}
	context.closePath();
	context.stroke();
	//
	context.beginPath();
	context.fillStyle = "white";
	context.moveTo(x,y);
	context.arc(x,y,r/1.1,-0,2*Math.PI,false);
	context.closePath();
	context.fill();
	//	
	context.beginPath();
	context.lineWidth = 3;
	for(var i = 0;i<12;i++){
		context.moveTo(x,y);
		context.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI,false);
	}
	context.closePath();
	context.stroke();
	//
	context.beginPath();
	context.fillStyle = "white";
	context.moveTo(x,y);
	context.arc(x,y,r/1.12,0,2*Math.PI,false);
	context.closePath();
	context.fill();
	
	context.beginPath();
	context.fillStyle = "black";
	context.moveTo(x,y);
	context.arc(x,y,r/30,0,2*Math.PI,false);
	context.fill();		
	//
	context.beginPath();
	context.lineWidth = 5;
	context.moveTo(x,y);
	context.arc(x,y,r/2.5,hValue,hValue,false);
	context.stroke();
	//
	context.beginPath();
	context.lineWidth = 3;
	context.moveTo(x,y);
	context.arc(x,y,r/2,mValue,mValue,false);
	context.stroke();	
	//
	context.beginPath();
	context.lineWidth = 2;
	context.moveTo(x,y);
	context.arc(x,y,r/1.6,sValue,sValue,false);
	context.stroke();
}
window.onload = function(){
	canvas = document.getElementById('canvas');
	context = canvas.getContext('2d');
	canvas.height = 500;
	canvas.width = 500;
	setInterval(draw,1000);	
	draw();	
}

 

Icon_酱
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用h5的方式来实现钟表
m0_71933813的博客
08-27 273
使用h5的方式来实现钟表
H5原生抖音罗盘时钟代码免费分享
11-17
最近抖音上有一个罗盘文字时钟软件非常火，就是文字时钟，给大家分享这款就是通过原生js来实现的文字时钟源码，有喜欢的朋友可以下载哦，无需安装，上传访问即可使用
Html5代码实现动态时钟
DICA的SEOer专栏
04-07 4858
该示例使用了HTML5，CSS和JavaScript来创建一个简单的动态时钟。CSS样式用于设置页面的背景颜色，文本颜色，字体大小，字体样式和文本对齐方式。JavaScript代码用于获取当前时间，并将其格式化为HH：MM：SS字符串，然后将其显示在页面上的一个DIV元素中。setInterval函数用于每秒钟调用一次updateTime函数，以便时钟可以动态更新。 该示例使用了HTML5的canvas元素和JavaScript来创建一个动态时钟表盘。
javascript通过canvas实现不同时区的时钟绘制
觉醒法师的专栏
04-17 1282
这里使用Javascript的class和canvas技术实现时钟的绘制，并且通过类实例来实现不同时区的时间显示，增强复用性。
h5 canvas绘制电子数字时钟
henly1217的专栏
01-12 472
使用h5的canvas绘制电子数字时钟
h5用canvas实现漂亮的时钟效果
11-06
这就是一个基本的Canvas时钟的实现过程。你可以根据自己的需求进行修改和优化，例如添加动画效果、改变颜色和样式，或者增加日期显示等。这个例子展示了Canvas的强大之处，它为我们提供了在网页上构建复杂交互式图形...
h5，canvas实现时钟.zip
03-20
在这个“h5，canvas实现时钟”的项目中，我们主要关注如何利用Canvas API来创建一个实时更新的旋转时钟。这个时钟不仅具有炫酷的彩色外观，颜色还能动态变化，为用户提供高度自定义的可能性。 首先，我们需要理解...
基于h5 canvas的模拟时钟javascript程序.zip
06-21
1、构造方法第一个参数支持传入canvas dom对象的id，既可以传canvas dom对象也可以传此dom对象的id。 2、增加setOptions方法，方便动态更新模拟时钟的属性。 3、修复传入options没有验证属性值的BUG，若传入的...
如何使用h5元素“Canvas”来绘制一个简易的网页时钟（附代码）
最新发布
weixin_75115821的博客
07-26 752
Canvas是HTML5中的一个元素，用于通过JavaScript和HTML绘制图形、动画和交互式内容。它可以在浏览器中创建和操作位图图像，使开发者可以在网页上实现高度个性化的视觉效果和交互体验。通过Canvas，开发者可以使用JavaScript来绘制图形、文本和图像。可以动态地更新画布上的内容，实现动画效果或响应用户的交互操作。Canvas提供了一组丰富的绘图函数和方法，使开发者可以在画布上绘制直线、矩形、圆形、路径等形状，并可以使用各种样式、颜色和渐变来装饰绘制的图形。
h5实现时钟效果
11-24
h5的canvas实现的时钟效果
HTML5 Canvas爱心时钟特效代码
03-20
HTML5 Canvas爱心时钟代码是一款爱心组成的数字时钟网页特效下载。
js实现简易计时器
12-29
自己实现的简单的倒计时器，发现网上关于这方面的代码有是有，但写的界面都不堪入目，乱七八糟的。我自己用js手写了一个分享给大家，界面比较简洁，后面会再写一个比较酷炫的。如果没有积分还想下载的小伙伴可以加qq邮箱联系我，我发给你：1343121616@qq.com
HTML5 canvas数字时钟15种样式特效代码
03-20
HTML5 canvas数字时钟15种样式代码，网页走动时钟。
canvas画时钟
pumpkin_truck的博客
06-04 2504
canvas画时钟 今天我们来学习学习如何使用canvas画时钟 首先我们得了解一下canvas是什么，怎么使用它： Canvas 中文名称叫“画布”，通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。 它最大得特点就是绘制它需要使用脚本绘制。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 首先在html5中添加canvas元素，规定元素的id ，width,和height，这次的高度和宽度我习惯用js书写。 <canvas id="canvas"&
H5 时钟 -- 源码分享
文轩
07-03 518
演示：http://wx0725.top/project/html/shizhong.html 这里没有设置背景色 可以直接使用iframe来引用，也可以下载源码自定义 iframe来引用 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Xuan时钟</title&g
Android——最简单的 Android Web 混合开发
GSLS
10-16 3617
Android——最简单的 JS H5 交互
Canvas绘制一个时钟
秃头小桂子
05-11 2231
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
【Canvas】js用canvas绘制一个钟表时钟动画效果
TA远方
11-29 1471
学习JavaScript的看过来，有没有兴趣用Canvas画图呢，可以画很多有趣的事物，自由发挥想象，收获多多哦，旋转角度绘图这个重点掌握到了吗，这里有一个例子，如何用canvas画钟表时钟动图效果，接下来开始讲，边学边做。
javascript写字技巧_js canvas实现写字动画效果
06-13
可以使用HTML5中的Canvas元素和JavaScript来实现写字动画效果。具体实现步骤如下： 1. 创建一个Canvas元素，并设置它的宽度和高度。 2. 使用JavaScript获取Canvas的上下文对象。 3. 设置字体、颜色、阴影等样式...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值