`
18211103738
  • 浏览: 82848 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

html5实现的canvas时钟

阅读更多

html5实现的canvas时针

效果:



 代码:

<!doctype html>
<html>
	<head>
		<title>时钟</title>
	</head>
	<body>
		<canvas width="500" height="500" id="canvas">
			您的浏览器不支持CANVAS标签
		</canvas>
		<script>
			var canvas = document.getElementById("canvas");
			var cxt = canvas.getContext("2d");
			
			function drawClock(){
				cxt.clearRect(0,0,500,500);		//清空画布
				//获取时间
				var now = new Date();
				var hour = now.getHours();
				var minute = now.getMinutes();
				var second = now.getSeconds();
				hour = hour>12?hour-12:hour;
				
				//表盘
				cxt.lineWidth=10;
				cxt.strokeStyle="blue";
				cxt.beginPath();
				cxt.arc(250,250,200,0,Math.PI*2,false);
				cxt.closePath();
				cxt.stroke();
				//时刻度
				for(var i=0;i<12;i++){
					cxt.save();
					cxt.lineWidth=8;
					cxt.strokeStyle="#000";
					cxt.translate(250,250);
					cxt.rotate(i*Math.PI*2/12);
					cxt.beginPath();
					cxt.moveTo(0,-195);
					cxt.lineTo(0,-175);
					cxt.closePath();
					cxt.stroke();
					cxt.restore();
				}
				//分刻度
				for(var i=0;i<60;i++){
					cxt.save();
					cxt.lineWidth=5;
					cxt.strokeStyle="#000";
					cxt.translate(250,250);
					cxt.rotate(i*Math.PI*2/60);
					cxt.beginPath();
					cxt.moveTo(0,-195);
					cxt.lineTo(0,-185);
					cxt.closePath();
					cxt.stroke();
					cxt.restore();
				}
				//时针
				cxt.save();
				cxt.lineWidth=8;
				cxt.strokeStyle="#000";
				cxt.translate(250,250);
				cxt.rotate(hour*(Math.PI*2/12)+minute*((Math.PI*2/12)/60));
				cxt.beginPath();
				cxt.moveTo(0,-145);
				cxt.lineTo(0,15);
				cxt.closePath();
				cxt.stroke();
				cxt.restore();
				//分针
				cxt.save();
				cxt.lineWidth=5;
				cxt.strokeStyle="#000";
				cxt.translate(250,250);
				cxt.rotate(minute*Math.PI*2/60);
				cxt.beginPath();
				cxt.moveTo(0,-165);
				cxt.lineTo(0,20);
				cxt.closePath();
				cxt.stroke();
				cxt.restore();
				//秒针
				cxt.save();
				cxt.lineWidth=3;
				cxt.strokeStyle="#f00";
				cxt.translate(250,250);
				cxt.rotate(second*Math.PI*2/60);
				cxt.beginPath();
				cxt.moveTo(0,-175);
				cxt.lineTo(0,30);
				cxt.stroke();
				cxt.closePath();
				cxt.beginPath();
				cxt.arc(0,0,8,0,Math.PI*2);
				cxt.closePath();
				cxt.fill();
				cxt.stroke();
				cxt.beginPath();
				cxt.arc(0,-145,5,0,Math.PI*2);
				cxt.closePath();
				cxt.fill();
				cxt.stroke();
				cxt.restore();
			}
			drawClock();
			setInterval(drawClock,1000);
		</script>
	</body>
</html>

 

  • 大小: 38.7 KB
分享到:
评论

相关推荐

    HTML5 canvas时钟效果.zip

    在这个“HTML5 canvas时钟效果.zip”压缩包中,包含了一个使用Canvas API实现的时钟显示功能。这个时钟不仅绘制了表盘、时针、分针和秒针,还展示了数字时间,为网页增添了一种实用且动态的元素。 1. **Canvas基本...

    HTML5 Canvas 动画时钟

    在这个"HTML5 Canvas 动画时钟"的主题中,我们将深入探讨如何利用Canvas API创建一个实时更新的、美观的数字或指针式时钟。 首先,Canvas API 提供了 `canvas` 元素,它是一个矩形区域,可以通过 JavaScript 来绘制...

    HTML5:canvas制作时钟

    HTML5 Canvas 制作时钟 HTML5 的 Canvas 元素提供了一个强大的绘图功能,通过使用 JavaScript 可以在Canvas上绘制各种图形和动画。在这篇文章中,我们将使用 HTML5 的 Canvas 元素来制作一个时钟。 Canvas 元素...

    html5 canvas实现时钟

    使用html5中的canvas,结合javascript实现时钟效果

    HTML5 Canvas绘制时钟

    这篇博文“HTML5 Canvas绘制时钟”旨在介绍如何利用Canvas API创建一个实时更新的数字或指针式时钟。我们将深入探讨Canvas的基础知识、相关API以及实现时钟的具体步骤。 1. HTML5 Canvas基础 HTML5 Canvas是一个二...

    html5 canvas云粒子数字时钟动画特效

    在这个“html5 canvas云粒子数字时钟动画特效”中,我们看到的是Canvas技术与时间显示、粒子系统相结合的应用实例。下面将详细阐述相关知识点。 1. HTML5 Canvas API: HTML5 Canvas是一个基于矢量图形的画布,...

    h5,canvas实现时钟.zip

    总结来说,"h5,canvas实现时钟"是一个结合了HTML5 Canvas API、数学运算、颜色处理和动画技巧的实例。通过学习和实践这个项目,开发者不仅可以深入理解Canvas的绘图机制,还能提升动态效果和用户体验的设计能力。

    h5用canvas实现漂亮的时钟效果

    这就是一个基本的Canvas时钟的实现过程。你可以根据自己的需求进行修改和优化,例如添加动画效果、改变颜色和样式,或者增加日期显示等。这个例子展示了Canvas的强大之处,它为我们提供了在网页上构建复杂交互式图形...

    HTML5 canvas数字时钟15种样式代码.zip

    在这个"HTML5 canvas数字时钟15种样式代码.zip"压缩包中,包含了15个不同的数字时钟设计示例,这些都是利用JavaScript和HTML5的canvas API来实现的网页实时走动时钟。 1. **canvas基本概念**:canvas是一个HTML标签...

    HTML5 Canvas创意时钟特效.zip

    通过阅读和学习这个文件,你可以更深入地理解HTML5 Canvas和JavaScript在实现动态时钟特效中的应用。这个例子展示了Canvas的灵活性和创造力,对于想要提升前端技能的开发者来说是一个很好的实践项目。

    html5 canvas画布绘制圆形时钟代码

    在这个“html5 canvas画布绘制圆形时钟代码”示例中,我们将深入探讨如何利用Canvas API来创建一个功能完备的圆形时钟。 首先,你需要在HTML文件中创建一个`&lt;canvas&gt;`元素,它将作为我们的画布。例如: ```html &lt;!...

    html5 canvas制作15种数字时钟样式代码

    在这个项目中,“html5 canvas制作15种数字时钟样式代码”是利用Canvas API创建了十五种不同设计风格的数字时钟。这些时钟样式丰富多样,可以满足不同的设计需求,为网页添加独特的视觉效果。 1. **Canvas基础知识*...

    canvas实现超级炫酷时钟

    在本文中,我们将深入探讨如何使用HTML5的Canvas API和JavaScript技术来创建一个炫酷的时钟。Canvas是一个强大的绘图工具,它允许我们在网页上动态地绘制图形,而JavaScript则提供了时间处理和动画功能。结合这两个...

    简洁易用的jQuery.clock-canvas基于canvas实现的时钟效果.zip

    本文将深入探讨一个基于jQuery和HTML5 Canvas技术的“jQuery.clock-canvas”插件,它以简洁、易用的方式实现了动态时钟的效果。我们将分析其工作原理,以及如何在自己的项目中集成并自定义这个时钟。 首先,让我们...

    HTML5 canvas超逼真的模拟时钟特效

    在本教程中,我们将探讨如何利用HTML5 canvas实现一个超逼真的模拟时钟特效。 首先,我们需要理解canvas的基本结构。HTML5的`&lt;canvas&gt;`标签是一个矩形区域,可以通过JavaScript来绘制图形。在canvas上绘图,我们...

    HTML5 Canvas粒子数字时钟特效.zip

    在这个“HTML5 Canvas粒子数字时钟特效”中,开发者利用Canvas API创建了一个独特的数字时钟,结合了粒子动画效果,为用户带来了一种新颖的视觉体验。 首先,我们要理解Canvas的基本概念。HTML5的 `&lt;canvas&gt;` 标签...

    js+html5实现canvas绘制网页时钟的方法

    本文将详细介绍如何使用HTML5中的canvas元素以及JavaScript来绘制一个网页时钟。 首先,我们需要了解HTML5的canvas元素。canvas为网页提供了一块画布,我们可以在其上绘制图形、图像、动画等。通过JavaScript,我们...

    canvas数字时钟效果

    在JavaScript开发中,图片展示处理是一项常见的任务,而“canvas数字时钟效果”是一个利用HTML5 Canvas API创建的动态时间显示实例。Canvas是HTML5的一个重要特性,它提供了一个二维绘图环境,允许开发者直接在网页...

    微信小程序使用canvas绘制实现时钟

    在这个场景下,我们将讨论如何利用canvas来实现一个实时更新的时钟功能。 首先,我们需要在微信小程序的页面配置文件(如`page.json`)中声明canvas组件,设置其在页面中的位置和大小。例如: ```json { ...

    canvas绘图实现实时时钟效果

    总结来说,通过HTML5的Canvas API,我们可以利用JavaScript实现实时更新的时钟效果。这个过程涉及到时间对象的处理、图形绘制方法的运用以及定时器的设置。这个实例不仅展示了Canvas的基本绘图能力,还揭示了...

Global site tag (gtag.js) - Google Analytics