html5 canvas 画钟表例子，参考别人的例子，整理完成，有详细注释
参考：http://www.html5tricks.com/demo/html5-canvas-circle-clock/index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <canvas id="myCanvas" width="400" height="400" style="border:5px solid #888;background-color:#edf;"></canvas> </body> </html>
var c = document.getElementById('myCanvas').getContext('2d');
function clock(){
//清空画布
c.clearRect(0,0,400,400);
var data = new Date();
var sec =data.getSeconds();
var min =data.getMinutes();
var hour=data.getHours();
var year=data.getFullYear();
var month=data.getMonth()+1;
var day =data.getDate();
//保存当前环境的状态
c.save();
//重新映射画布上的 (0,0) 位置
c.translate(200,200);
//旋转当前绘图(逆时针旋转1/4的圆路径)
c.rotate(-2*Math.PI/4);
//分钟刻度线（画60个刻度线）
for(var i=0;i<60;i++){
c.beginPath();
c.strokeStyle = "#f00";
c.lineWidth = 5;
c.moveTo(110,0);
c.lineTo(120,0);
c.stroke();
//每个6deg画一个时钟刻度线(顺时针旋转1/60的圆路径)
c.rotate(2*Math.PI/60);
c.closePath();
}
//时钟刻度线（画12个刻度线）
for(var i=0;i<12;i++){
c.beginPath();
c.strokeStyle = "#000";
c.lineWidth = 8;
c.moveTo(100,0);
c.lineTo(120,0);
c.stroke();
//每个30deg画一个时钟刻度线(顺时针旋转1/12的圆路径)
c.rotate(2*Math.PI/12);
c.closePath();
}
c.rotate(-1);
//时钟刻度数字（画12个刻度数字）
for(var i=0;i<12;i++){
c.beginPath();
c.strokeStyle = "blue";
c.lineWidth = 2 ;
c.strokeText(i+1,0,90);
//每个30deg画一个时钟刻度线
c.rotate(2*Math.PI/12);
c.closePath();
}
c.rotate(1);
//时间显示
c.rotate(2*Math.PI/4);
c.font="30px 宋体";
c.strokeText(year+"-"+month+"-"+day+" "+hour+":"+min+":"+sec,-130,180);
c.rotate(-2*Math.PI/4);
//外表盘
c.beginPath();
c.strokeStyle = "pink";
c.lineWidth = 12 ;
//画圆
c.arc(0,0,135,0,Math.PI*2);
c.stroke();
c.closePath();
//画时针
hour = hour>12?hour-12:hour;
c.beginPath();
//保存当前环境的状态
c.save();
//顺时针旋转当前时针指向所形成的圆弧路径
c.rotate(2*Math.PI/12*hour+2*Math.PI/12/60*min+2*Math.PI/12/3600*sec);
c.strokeStyle = "yellowgreen";
c.lineWidth = 4;
c.moveTo(-20,0);
c.lineTo(50,0);
c.stroke();
//返回之前保存过的路径状态和属性
c.restore();
c.closePath();
//画分针
c.beginPath();
//保存当前环境的状态
c.save();
//顺时针旋转当前分针指向所形成的圆弧路径
c.rotate(2*Math.PI/60*min+2*Math.PI/60/60*sec);
c.strokeStyle = "springgreen";
c.lineWidth = 3;
c.moveTo(-30,0);
c.lineTo(70,0);
c.stroke();
//返回之前保存过的路径状态和属性
c.restore();
c.closePath();
//画秒针
c.beginPath();
//保存当前环境的状态
c.save();
//顺时针旋转当前秒针指向所形成的圆弧路径
c.rotate(2*Math.PI/60*sec);
c.strokeStyle = "red";
c.lineWidth = 2 ;
c.moveTo(-40,0);
c.lineTo(120,0);
c.stroke();
//返回之前保存过的路径状态和属性
c.restore();
c.closePath();
c.restore();
}
clock();
setInterval(clock,1000);
相关推荐
在这个“html5canvas 写的指针式钟表”项目中，我们看到的是一个利用HTML5 Canvas、JavaScript以及可能的一些CSS技术来创建的实时钟表模拟器。这个钟表不仅美观，还能与用户的本地计算机时间保持同步，提供准确的...
"HTML5 Canvas写的酷炫钟表"是一个基于这个技术实现的3D钟表项目，它展示了Canvas在动态视觉效果上的潜力。在这个项目中，我们将探讨HTML5 Canvas的基础知识、3D渲染原理以及如何利用JavaScript驱动实时动画。 首先...
在HTML5中，Canvas元素提供了一个可编程的2D绘图环境，允许开发者直接在网页上绘制图形。本教程将详细介绍如何使用canvas绘制一个动态的钟表，这涉及到JavaScript和Canvas API的基础知识。 首先，我们需要在HTML...
在HTML5 Canvas上绘制时钟表时间特效，是利用Canvas API提供的各种绘图函数来模拟真实世界中的钟表行为，如指针转动、时间更新等，从而为网页增添动态视觉效果。 首先，我们需要理解Canvas的基本结构。HTML5的`...
在这个“HTML5 Canvas指针时钟表特效”项目中，我们利用Canvas API构建了一个炫酷的时钟界面，适用于个性化博客或其他需要显示时间的网页。 首先，我们需要了解Canvas的基本结构。在HTML中，`<canvas>`元素提供了一...
使用HTML5的Canvas做的一个钟表小程序，可以作为入门学习！
这个“html5 canvas绘制时钟表时间”项目就是利用Canvas API来实现一个实时显示时间的时钟效果。下面将详细解释相关知识点。 1. **HTML5 Canvas 基础**： - Canvas 是HTML5中的一个元素，通过JavaScript API提供了...
在本文中，我们将深入探讨如何使用HTML5 Canvas绘制一个动态更新的时间显示，即一个模拟时钟表的效果。 首先，我们需要在HTML文档中创建一个`<canvas>`元素，为其指定一个ID以便于通过JavaScript进行操作： ```...
HTML5 Canvas是一个强大的Web绘图工具，允许开发者在网页上直接进行图形绘制，无需借助Flash或其他插件。这篇博文“HTML5 Canvas绘制时钟”旨在介绍如何利用Canvas API创建一个实时更新的数字或指针式时钟。我们将...
Canvas钟表控件，使用方法如下： <!doctype html> <html> <script type="text/javascript" src="Clock.js"></script> <canvas width='500' height='500' id='clock'></canvas> initClock('clock...
本教程将详细讲解如何利用HTML5来制作一个简单的钟表。 首先，HTML5的核心在于其语义化标签，这些标签如`<header>`, `<nav>`, `<article>`, `<section>`等，帮助我们更好地组织页面结构。在制作钟表的场景下，我们...
2. `<canvas>`元素：这是HTML5中的一个绘图区域，允许开发者通过JavaScript进行动态图形绘制，是实现钟表指针动画的关键。 3. `<time>`元素：虽然在这个特定的特效中可能不直接使用，但用于表示日期和时间，有助于...
HTML5 Canvas是HTML5新增的一项强大特性，它允许开发者在网页上直接绘制图形，从而创建出丰富的交互式用户界面。这个“html5 canvas圆形时钟代码.zip”压缩包包含了一个利用Canvas API创建的本地时钟的示例。下面将...
在本文中，我们将深入探讨如何使用HTML5的Canvas API来创建一个实时的钟表效果。Canvas是一个强大的图形绘制工具，允许开发者通过JavaScript直接在网页上绘制图形。在钟表的例子中，我们主要利用了Canvas的绘图方法...
关于网页的canvas画布生成时钟的pdf，采用的JavaScript写，可以在网页中生成一个时钟，里面是直接的代码
利用canvas实现web端钟表的展示，同时加强我们对canvas各项属性和方法的印象和运用
在JavaScript和HTML5的帮助下，我们可以轻松创建一个动态的、实时更新的时钟表。这个时钟表能够显示当前的时间，并且随着每一秒的流逝而自动更新。以下将详细讲解如何利用这两个技术实现这一功能。 首先，我们需要...