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的基本绘图能力，还揭示了...