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>
相关推荐
在这个“HTML5 canvas时钟效果.zip”压缩包中,包含了一个使用Canvas API实现的时钟显示功能。这个时钟不仅绘制了表盘、时针、分针和秒针,还展示了数字时间,为网页增添了一种实用且动态的元素。 1. **Canvas基本...
在这个"HTML5 Canvas 动画时钟"的主题中,我们将深入探讨如何利用Canvas API创建一个实时更新的、美观的数字或指针式时钟。 首先,Canvas API 提供了 `canvas` 元素,它是一个矩形区域,可以通过 JavaScript 来绘制...
HTML5 Canvas 制作时钟 HTML5 的 Canvas 元素提供了一个强大的绘图功能,通过使用 JavaScript 可以在Canvas上绘制各种图形和动画。在这篇文章中,我们将使用 HTML5 的 Canvas 元素来制作一个时钟。 Canvas 元素...
使用html5中的canvas,结合javascript实现时钟效果
这篇博文“HTML5 Canvas绘制时钟”旨在介绍如何利用Canvas API创建一个实时更新的数字或指针式时钟。我们将深入探讨Canvas的基础知识、相关API以及实现时钟的具体步骤。 1. HTML5 Canvas基础 HTML5 Canvas是一个二...
在这个“html5 canvas云粒子数字时钟动画特效”中,我们看到的是Canvas技术与时间显示、粒子系统相结合的应用实例。下面将详细阐述相关知识点。 1. HTML5 Canvas API: HTML5 Canvas是一个基于矢量图形的画布,...
总结来说,"h5,canvas实现时钟"是一个结合了HTML5 Canvas API、数学运算、颜色处理和动画技巧的实例。通过学习和实践这个项目,开发者不仅可以深入理解Canvas的绘图机制,还能提升动态效果和用户体验的设计能力。
这就是一个基本的Canvas时钟的实现过程。你可以根据自己的需求进行修改和优化,例如添加动画效果、改变颜色和样式,或者增加日期显示等。这个例子展示了Canvas的强大之处,它为我们提供了在网页上构建复杂交互式图形...
在这个"HTML5 canvas数字时钟15种样式代码.zip"压缩包中,包含了15个不同的数字时钟设计示例,这些都是利用JavaScript和HTML5的canvas API来实现的网页实时走动时钟。 1. **canvas基本概念**:canvas是一个HTML标签...
通过阅读和学习这个文件,你可以更深入地理解HTML5 Canvas和JavaScript在实现动态时钟特效中的应用。这个例子展示了Canvas的灵活性和创造力,对于想要提升前端技能的开发者来说是一个很好的实践项目。
在这个“html5 canvas画布绘制圆形时钟代码”示例中,我们将深入探讨如何利用Canvas API来创建一个功能完备的圆形时钟。 首先,你需要在HTML文件中创建一个`<canvas>`元素,它将作为我们的画布。例如: ```html <!...
在这个项目中,“html5 canvas制作15种数字时钟样式代码”是利用Canvas API创建了十五种不同设计风格的数字时钟。这些时钟样式丰富多样,可以满足不同的设计需求,为网页添加独特的视觉效果。 1. **Canvas基础知识*...
在本文中,我们将深入探讨如何使用HTML5的Canvas API和JavaScript技术来创建一个炫酷的时钟。Canvas是一个强大的绘图工具,它允许我们在网页上动态地绘制图形,而JavaScript则提供了时间处理和动画功能。结合这两个...
本文将深入探讨一个基于jQuery和HTML5 Canvas技术的“jQuery.clock-canvas”插件,它以简洁、易用的方式实现了动态时钟的效果。我们将分析其工作原理,以及如何在自己的项目中集成并自定义这个时钟。 首先,让我们...
在本教程中,我们将探讨如何利用HTML5 canvas实现一个超逼真的模拟时钟特效。 首先,我们需要理解canvas的基本结构。HTML5的`<canvas>`标签是一个矩形区域,可以通过JavaScript来绘制图形。在canvas上绘图,我们...
在这个“HTML5 Canvas粒子数字时钟特效”中,开发者利用Canvas API创建了一个独特的数字时钟,结合了粒子动画效果,为用户带来了一种新颖的视觉体验。 首先,我们要理解Canvas的基本概念。HTML5的 `<canvas>` 标签...
本文将详细介绍如何使用HTML5中的canvas元素以及JavaScript来绘制一个网页时钟。 首先,我们需要了解HTML5的canvas元素。canvas为网页提供了一块画布,我们可以在其上绘制图形、图像、动画等。通过JavaScript,我们...
在JavaScript开发中,图片展示处理是一项常见的任务,而“canvas数字时钟效果”是一个利用HTML5 Canvas API创建的动态时间显示实例。Canvas是HTML5的一个重要特性,它提供了一个二维绘图环境,允许开发者直接在网页...
在这个场景下,我们将讨论如何利用canvas来实现一个实时更新的时钟功能。 首先,我们需要在微信小程序的页面配置文件(如`page.json`)中声明canvas组件,设置其在页面中的位置和大小。例如: ```json { ...
总结来说,通过HTML5的Canvas API,我们可以利用JavaScript实现实时更新的时钟效果。这个过程涉及到时间对象的处理、图形绘制方法的运用以及定时器的设置。这个实例不仅展示了Canvas的基本绘图能力,还揭示了...