html5 Canvas实例指针走动的时钟

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取本地时间的Html5时钟特效</title>
</head>
<body>
<div style="width:520px;margin:0 auto;">
	<canvas id="clock" width="520" height="520">您的浏览器不支持canvas标签</canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById('clock');
var clock = canvas.getContext('2d');
function drowClock(){
	//清除画布
	clock.clearRect(0, 0, 800, 800);
	var now = new Date();
	var secd = now.getSeconds();
	var min = now.getMinutes();
	var hour = now.getHours();
	//小时必须获取浮点类型（小时+分数转化的小时）
	//时间格式19:23:30
	//将24小时进制装换为12小时进制
	hour = hour + (min / 60);
	hour = hour > 12 ? hour - 12 : hour;
	//背景
	clock.beginPath();
	clock.lineWidth = 10;
	clock.strokeStyle = "blue";
	clock.arc(250, 250, 200, 0, 360, false);
	clock.stroke();
	clock.closePath();
	//刻度
	//时刻度
	for (var i = 0; i < 12; i++) {
		clock.save();
		//设置时针的粗细
		clock.lineWidth = 7;
		//设置时针的颜色
		clock.strokeStyle = "#000";
		//先设置0,0点
		clock.translate(250, 250);
		//再设置旋转角度
		clock.rotate((i * 30) * Math.PI / 180);//角度*Math.PI/180=弧度
		clock.beginPath();
		clock.moveTo(0, -170);
		clock.lineTo(0, -190);
		clock.closePath();
		clock.stroke();
		clock.restore();
	}
	//分刻度
	for (var i = 0; i < 60; i++) {
		clock.save();
		//设置时针的粗细
		clock.lineWidth = 3;
		//设置时针的颜色
		clock.strokeStyle = "#000";
		//先设置0,0点
		clock.translate(250, 250);
		//再设置旋转角度
		clock.rotate((i * 6) * Math.PI / 180);//角度*Math.PI/180=弧度
		clock.beginPath();
		clock.moveTo(0, -180);
		clock.lineTo(0, -190);
		clock.closePath();
		clock.stroke();
		clock.restore();
	}
	//时针
	clock.save();
	clock.lineWidth = 7;
	clock.strokeStyle = "black";
	clock.translate(250, 250);
	clock.rotate(hour * 30 * Math.PI / 180);
	clock.beginPath();
	clock.moveTo(0, -140);
	clock.lineTo(0, 10);
	clock.stroke();
	clock.closePath();
	clock.restore();
	////分针
	clock.save();
	clock.lineWidth = 5;
	clock.strokeStyle = "black";
	clock.translate(250, 250);
	clock.rotate(min * 6 * Math.PI / 180);
	clock.beginPath();
	clock.moveTo(0, -160);
	clock.lineTo(0, 10);
	clock.stroke();
	clock.closePath();
	clock.restore();
	//秒针
	clock.save();
	clock.lineWidth = 3;
	clock.strokeStyle = "red";
	clock.translate(250, 250);
	clock.rotate(secd * 6 * Math.PI / 180);
	clock.beginPath();
	clock.moveTo(0, -170);
	clock.lineTo(0, 10);
	clock.closePath();
	clock.stroke();
	//画交叉点
	clock.beginPath();
	clock.arc(0, 0, 5, 0, 360, false);
	clock.closePath();
	clock.fillStyle = "gray";
	clock.fill();
	clock.stroke();
	clock.beginPath();
	clock.arc(0, -150, 5, 0, 360, false);
	clock.closePath();
	clock.fillStyle = "gray";
	clock.fill();
	clock.stroke();
	clock.restore();
}
//使用setInternal（代码，（毫秒）时间）  让时钟动起来
drowClock();
setInterval(drowClock, 1000);
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

html5 Canvas实例指针走动的时钟

分类

日期时间

描述

又一个html5 Canvas实例——绘制一个指针走动的时钟，使用setInternal（代码，（毫秒）时间）让时钟动起来，圆形风格，表盘、指针等都是Canvas绘图实现，无使用图片，学习HTML5编程的可参考范例，JS代码部分已绘出注释，便于学习理解。